hexo搭建

本文最后更新于:2024年6月21日 凌晨

hexo搭建博客

更改端口:/node_modules/hexo-server/index.js 可修改启动端口:port

下面是hexo的项目结构

.
├── _config.yml      // 站点配置文件
├── db.json          // 缓存文件
├── node_modules     // 安装的插件以及hexo所需的一些nodejs模块
├── package.json     // 项目的依赖文件
├── scaffolds        // 模版文件
├── source           // 源文件,用来存放你的文章 md 文件
└── themes           // 主题文件

简约主题:fluid安装路径:hexo-theme-fluid

文章配置

隐藏文章


hide: true
# 文章排序 sticky 数值越大,该文章越靠前
sticky: 100
# 文章在首页的封面图
index_img: /img/example.jpg
# 文章页顶部大图
banner_img

文章语法

Tag 插件

标签

{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

可选便签:

primary

secondary

success

danger

warning

info

light

行内标签

# 在 markdown 中加入如下的代码来使用 Label:
{% label primary @text %}
# 或者使用 HTML 形式:
<span class="label label-primary">Label</span>

可选 Label:

primary success info danger warningdefault

若使用 {% label primary @text %},text 不能以 @ 开头

勾选框

# 在 markdown 中加入如下的代码来使用 Checkbox:
{% cb text, checked?, incline? %}
# text:显示的文字
# checked:默认是否已勾选,默认 false
# incline: 是否内联(可以理解为后面的文字是否换行),默认 false
默认样式
自定义 不换行

按钮

{% btn url, text, title %}
# url:跳转链接
# text:显示的文字
# title:鼠标悬停时显示的文字(可选)
按钮

组图

# 如果想把多张图片按一定布局组合显示,你可以在 markdown 中按如下格式:
{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}
# total:图片总数量,对应中间包含的图片 url 数量 n1-n2-...:每行的图片数量,可以省略,默认单行最多 3 张图,求和必须相等于 total,否则按默认样式
# 如下图为 {% gi 5 3-2 %} 示例,代表共 5 张图,第一行 3 张图,第二行 2 张图。

工作流

在根目录创建.github文件夹,在里面新建workflows文件夹,进入后新建autodeploy.yml,路径为:/.github/workflows/autodeploy.yml

# 当有改动推送到master分支时,启动Action
name: 自动部署

on:
  push:
    branches:
      - main #2020年10月后github新建仓库默认分支改为main,注意更改

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: main #2020年10月后github新建仓库默认分支改为main,注意更改

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: "16.x" #action使用的node版本,建议大版本和本地保持一致。可以在本地用node -v查询版本号。

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        uses: actions/cache@v1
        id: cache
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install --save

      - name: 生成静态文件
        run: |
          hexo clean
          hexo generate

      - name: 部署到仓库 #此处master:master 指从本地的master分支提交到远程仓库的master分支,若远程仓库没有对应分支则新建一个。如有其他需要,可以根据自己的需求更改。
        run: |
          cd ./public
          git init
          git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
          git config --global user.email '${{ secrets.GITHUBEMAIL }}'
          git add .
          git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
          git push --force --quiet "https://${{ secrets.GITHUBUSERNAME }}:${{ secrets.GITHUBTOKEN }}@github.com/${{ secrets.GITHUBUSERNAME }}/${{ secrets.GITHUBUSERNAME }}.github.io.git" master:main
      
      - name: 部署到阿里云OSS
        env:
          OSS_AccessKeyID: ${{ secrets.ACCESS_KEY_ID }}
          OSS_AccessKeySecret: ${{ secrets.ACCESS_KEY_SECRET }}
          OSS_EndPoint: oss-cn-shanghai.aliyuncs.com
          OSS_Bucket: xxxxx
        run: |
          wget -q http://gosspublic.alicdn.com/ossutil/1.6.10/ossutil64
          chmod +x ./ossutil64
          ./ossutil64 config -e $OSS_EndPoint -i $OSS_AccessKeyID -k $OSS_AccessKeySecret -L CH
          ./ossutil64 rm -r -f oss://$OSS_Bucket/
          ./ossutil64 cp -r -f ./public oss://$OSS_Bucket/

可选择上传源码到GitHub仓库,启动工作流,自动部署到另一个仓库为静态网页,或者讲静态网页部署到阿里云OSS,

部署需要在仓库中配置密钥:找到要上传的对应的仓库,点击Settings,选择Secrets and variables中的Actions

1698200170919

下面是我的工作流,上传到Github,推送到Gitee和阿里云OSS:

# 当有改动推送到master分支时,启动Action
name: 自动部署

on:
  push:
    branches:
      - main #2020年10月后github新建仓库默认分支改为main,注意更改

  release:
    types:
      - published

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检查分支
        uses: actions/checkout@v2
        with:
          ref: main #2020年10月后github新建仓库默认分支改为main,注意更改

      - name: 安装 Node
        uses: actions/setup-node@v1
        with:
          node-version: "16.x" #action使用的node版本,建议大版本和本地保持一致。可以在本地用node -v查询版本号。

      - name: 安装 Hexo
        run: |
          export TZ='Asia/Shanghai'
          npm install hexo-cli -g

      - name: 缓存 Hexo
        id: cache-npm
        uses: actions/cache@v3
        env:
          cache-name: cache-node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: 安装依赖
        if: steps.cache.outputs.cache-hit != 'true'
        run: |
          npm install --save

      - name: 生成静态文件
        run: |
          hexo clean
          hexo generate

      - name: 部署到Gitee仓库 #此处master:master 指从本地的master分支提交到远程仓库的master分支,若远程仓库没有对应分支则新建一个。如有其他需要,可以根据自己的需求更改。
        run: |
          cd ./public
          git init
          git config --global user.name '${{ secrets.GITHUBUSERNAME }}'
          git config --global user.email '${{ secrets.GITHUBEMAIL }}'
          git add .
          git commit -m "${{ github.event.head_commit.message }} $(date +"%Z %Y-%m-%d %A %H:%M:%S") Updated By Github Actions"
          git push --force --quiet "https://${{ secrets.GITEEUSERNAME }}:${{ secrets.GITEETOKEN }}@gitee.com/${{ secrets.GITEEUSERNAME }}/${{ secrets.GITEEUSERNAME }}.git" master:main #gitee部署写法,需要的自行取消注释
      
      - name: 部署到阿里云OSS
        env:
          OSS_AccessKeyID: ${{ secrets.ACCESS_KEY_ID }}
          OSS_AccessKeySecret: ${{ secrets.ACCESS_KEY_SECRET }}
          OSS_EndPoint: oss-cn-shanghai.aliyuncs.com
          OSS_Bucket: phils
        run: |
          wget -q http://gosspublic.alicdn.com/ossutil/1.6.10/ossutil64
          chmod +x ./ossutil64
          ./ossutil64 config -e $OSS_EndPoint -i $OSS_AccessKeyID -k $OSS_AccessKeySecret -L CH
          ./ossutil64 rm -r -f oss://$OSS_Bucket/
          ./ossutil64 cp -r -f ./public oss://$OSS_Bucket/

下面是实现图:

1698200584306

博客嵌入PPT

可以通过鼠标和键盘控制

  • 页面: ↑/↓/←/→ Space Home End(空格,home键,end键)
  • 全屏: F
  • Overview: -/+
  • 演讲者笔记: N
  • 网格背景: Enter

nodeppt

首先可以看看官网给的demo,非常的炫酷。

文章加密

安装

npm install --save hexo-blog-encrypt

在需要加密的文件头加入

---
password: wangweijun
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

hexo搭建
https://junyyds.top/2023/09/14/hexo搭建/
作者
Phils
发布于
2023年9月15日
更新于
2024年6月21日
许可协议