Hexo 博客使用 Stellar

1# 创建博客文件夹
2mkdir myblog && cd myblog
3# 全局安装 hexo
4npm i -g hexo-cli
5# 初始化博客目录
6hexo init
7# 安装一个插件，后面部署时需要使用（hexo d）
8npm install hexo-deployer-git

1|--.github
2|--node_modules
3|--scaffolds
4|--source
5|--themes
6|--config.landscape.yml
7|--_config.yml
8|--package-lock.json
9|--package.json

 1cd myblog
 2
 3git init
 4# 关联你的远程仓库
 5git add origin git@github.com:yourname.github.io.git
 6
 7# 浪子喜欢放到 main 分支上
 8git checkout -b main
 9
10git add -A
11git commit -m "first commit my blog"
12# 推送到远程分支，并且建立分支间的追踪关系.
13git push -u origin main

 1# URL
 2## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
 3url: http://yourname.github.io
 4permalink: :year/:month/:day/:title/
 5permalink_defaults:
 6pretty_urls:
 7  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
 8  trailing_html: true # Set to false to remove trailing '.html' from permalinks
 9
10...
11
12deploy:
13  # 类型
14  type: git
15  # 部署分支名称，按照自己喜欢的起名就可以。这里写完还需要在 GitHub 上进行分支创建并配置
16  branch: pages
17  # 仓库，这里使用的 SSH 方式
18  repo: git@github.com:yourname/yourname.github.io.git
19  # 如果你看了 hexo 的文档，这里就很清楚啦，部署的时候会使用这个消息作为提交的信息
20  message: Automatic deploy by Github Action:{{ now('yyyy-MM-dd HH:mm:ss') }}

1# 先推送备份，可以跳过这步直接进行 部署
2git add .
3git commit -m "push config"
4git push
5
6# 部署（也可以直接使用 hexo s 本地预览）
7hexo cl && hexo g && hexo d

1cd myblog
2
3git submodule add https://github.com/xaoxuu/hexo-theme-stellar.git themes/stellar

1# 默认为 landscape
2# 这里的名字是博客主题目录 myblog/themes/ 下的主题文件夹名称
3theme: stellar

1---
2layout: wiki
3wiki: cloudservice # wiki 项目 id，下面创建的 source/_data/wiki/ 中的 yml 文件名称必须与此相同
4title: xxxx
5---

 1# name title 为自定义文章名称
 2# name 和 title 的区别在于 name 是内容页面显示的名称，title 是在 wiki 列表中显示的名称
 3name: cloudservice
 4title: 云原生与微服务
 5description: 描述，wiki 列表中显示在 title 下方的简单文字描述
 6# 分类标签
 7tags: 技术加油站
 8
 9# 不显示封面，默认显示：true
10coverpage: false
11cover: https://oss.muzing.top/image/Nginx_%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86.png
12# wiki 列表标题旁的 icon
13icon: https://oss.muzing.top/image/Nginx_%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86.png
14
15# 搜索配置，在该 wiki 页中只能搜索指定路径的文章内容
16search:
17  filter: /wiki/技术加油站/cloudservice/
18  placeholder: 在 cloudservice 中搜索...
19
20# 覆盖侧边栏
21sidebar:
22  - toc
23  - timeline_stellar_releases
24  - related
25
26# wiki 页分类目录
27# stellar 主题会自动查找并显示该目录的所有文章
28base_dir: /wiki/技术加油站/cloudservice/
29
30# 如果文章需要分组，则按照此格式
31toc:
32  '容器':
33    - index  # 实际文章路径：/wiki/技术加油站/cloudservice/index.md
34    - path/Docker # 实际文章路径：/wiki/技术加油站/cloudservice/Docker.md
35
36# 若无需分组按照以下格式
37# toc:
38#   - index
39#   - path/Docker
40#   - otherDoc

1- cloudservice

1# permalink: :year/:month/:day/:title/
2permalink: p/:abbrlink/
3abbrlink:
4  alg: crc32  #算法： crc16(default) and crc32
5  rep: hex    #进制： dec(default) and hex

1# 懒人推荐
2npm install --save hexo-filter-kroki

1# 进入博客目录
2cd hexo-blog
3
4git config core.ignorecase false

 1name: Hexo Blog CI
 2
 3# master branch on push, auto run
 4on:
 5  push:
 6    branches:
 7      - main
 8
 9jobs:
10  build:
11    runs-on: ubuntu-latest
12
13    steps:
14    # check it to your workflow can access it
15    # https://github.com/marketplace/actions/checkout
16    - name: Checkout Repository main branch
17      uses: actions/checkout@v4
18      with:
19        submodules: true # Checkout private submodules(themes or something else)
20        fetch-depth: 0
21
22    # from: https://github.com/actions/setup-node
23    - name: Setup Node.js
24      uses: actions/setup-node@v4
25      with:
26        node-version: 20
27
28    - name: Setup Hexo Dependencies
29      run: |
30        npm install && npm install hexo-deployer-git
31        npm install -g hexo-cli
32
33    - name: Setup Deploy Private Key
34      env:
35        HEXO_DEPLOY_PRIVATE_KEY: ${{ secrets.ACCESS_TOKEN }}    # 仓库的私钥的 Name，需要改为自己的
36      run: |
37        mkdir -p ~/.ssh/
38        echo "$HEXO_DEPLOY_PRIVATE_KEY" > ~/.ssh/id_rsa
39        chmod 600 ~/.ssh/id_rsa
40        ssh-keyscan github.com >> ~/.ssh/known_hosts
41
42    - name: Setup Git Infomation
43      run: |
44        git config --global user.name "github-action"
45        git config --global user.email "github-action@no-reply.com"
46
47    - name: Deploy Hexo
48      run: |
49        hexo clean
50        hexo generate
51        hexo deploy

 1name: Deploy Hexo Blog
 2
 3# master branch on push, auto run
 4on:
 5  push:
 6    branches:
 7      - main
 8
 9jobs:
10  build:
11    runs-on: ubuntu-latest
12
13    steps:
14    # check it to your workflow can access it
15    - name: Checkout Repository main branch
16      uses: actions/checkout@v4
17      with:
18        submodules: true # Checkout private submodules(themes or something else)
19        fetch-depth: 0
20
21    # from: https://github.com/actions/setup-node
22    - name: Setup Node.js
23      uses: actions/setup-node@v4
24      with:
25        node-version: 20
26
27    # 生成文档
28    - name: Generator docs
29      run: |
30        npm i
31        npm install -g hexo-cli
32        hexo cl && hexo g
33    # 使用已有的 action 进行部署
34    # https://github.com/JamesIves/github-pages-deploy-action
35    - name: Deploy pages
36      uses: JamesIves/github-pages-deploy-action@v4
37      with:
38        # 使用 public 内的文件部署到 pages 分支
39        folder: public
40        # 部署分支
41        branch: pages
42        # 默认使用 secrets.GITHUB_TOKEN
43        # token: ${{ secrets.GITHUB_TOKEN }}

1cd myblog
2
3npm install hexo-filter-date-from-git --save

 1hitokoto:
 2  layout: markdown
 3  title: 一言
 4  content: | # support markdown
 5    <span class="hitokoto">一言加载中...</span>
 6    <script>
 7      document.addEventListener('DOMContentLoaded', async () => {
 8        try {
 9          const response = await fetch('https://v1.hitokoto.cn');
10          const data = await response.json();
11          // 获取页面上用于显示一言的元素
12          const dom = document.querySelector('.hitokoto');
13          // 设置一言内容
14          if (dom && typeof data.hitokoto === 'string') {
15              let res = data.from ?? false ? "—— 《" + data.from + "》":""
16              dom.innerText = data.hitokoto +" "+ res;
17          } else {
18            console.error('未能获取或解析一言数据，或者找不到目标 DOM 元素');
19          }
20        } catch (error) {
21          console.error('请求过程中发生错误：', error);
22        }
23      });
24    </script>

1site_tree:
2  # -- 列表类页面 -- #
3  # 主页配置 引入 hitokoto 一言组件
4  home:
5    leftbar: hitokoto, recent

1article:
2  ...
3  # 添加分类的标签并设置对应的颜色
4  category_color:
5    '探索号': '#f44336'
6    '编程后花园': '#A505F0'
7    '技术加油站': '#c0ea66'
8    '人生图书馆': '#EDADFF'

 1footer:
 2  ...
 3  content: | # 支持 Markdown 格式
 4    <uptime></uptime>
 5    <script>
 6      setInterval(() => {
 7        let startDate = new Date("2023-10-01")
 8        let now = new Date();
 9        // 计算时间差（以毫秒为单位）
10        let differenceInMs = now.getTime() - startDate.getTime();
11        // 转换为天数、小时数、分钟数和秒数
12        let days = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
13        let hours = Math.floor((differenceInMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
14        let minutes = Math.floor((differenceInMs % (1000 * 60 * 60)) / (1000 * 60));
15        let seconds = Math.floor((differenceInMs % (1000 * 60)) / 1000);
16        let uptimeTags = Array.from(document.getElementsByTagName("uptime"));
17        uptimeTags.forEach(ele => { ele.textContent = `🌱 本站已活了 ${days} 天 | ${hours} 时 | ${minutes} 分 | ${seconds} 秒 🌱` });
18      }, 1000);
19    </script>