Hexo最优搭建教程（一）

1. Hexo最优搭建教程（一）
2. Hexo最优搭建教程（二）

准备工作

1. 注册一个Github账号。
2. 安装VSCode、Git、Node.js
3. 会科学上网（不过，感觉你有Github应该就会来着）

搭建Hexo

首先我们在你的账号或者你的组织内创建两个仓库。

1. 一个仓库用于储存Hexo源码,仓库名随意，选择仓库类型为Private ，勾选 Add a README file。
   

2. 一个仓库用于储存生成后的Hexo静态网页，仓库名必须满足<Owner>.github.io，仓库类型必须选择Public ，然后勾选Add a README file（Owner在填写仓库名的文本框左边，不明白看图嘞）
   

然后打开你的VSCode（中文的话，第一次打开右下角有提醒切换中文来着），点击克隆Git仓库…，然后选择从Gihub克隆。不出意外你应该没有登陆，按照提示登陆，然后克隆下来到本地就好，我放在Documents里面来着。

然后在VSCode里面打开这个项目（没记错的话，克隆下来就会提示你打开项目的说），接下来按住Ctrl+`打开终端，再之后敲一下命令到终端：

npm install -g hexo-cli  #安装hexo
hexo init hexo  #初始化Hexo到当前项目的hexo文件夹

然后移动hexo目录中所有文件（除了node_modules文件夹）到项目根目录，然后删除 hexo 文件夹（其实命令也可以，但Linux和Windows好像不一样，还是你手动删吧，反正 VSCode 还是很方便的

接下来继续在终端执行命令

npm install #根据 package.json 安装所需要的包
hexo g && hexo s #hexo g 是生成博客静态文件到/public,hexo s是在本地搭建临时服务进行预览

现在我们在终端按住Ctrl的同时单击 http://localhost:4000/ 你就可以预览默认的Hexo了

更换主题

你发现了吗，默认的主题可能并不受我们大多数人喜欢，现在我们要换成我们自己的主题！

首先在网上找到你的主题，然后根据官方的教程来安装，这里我们选择Butterfly主题为例，他可以说是我在Hexo最中意的一款主题了

依据教程我们需要进行以下几步操作：

1. 终端执行以下命令安装稳定版Butterfly,当然你也可以选择Dev（但我不是很建

   git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

2. 修改根目录下_config.yml文件中主题配置为theme:butterfly

3. 安装渲染器

   npm install hexo-renderer-pug hexo-renderer-stylus

4. 在根目录建立_config.butterfly.yml

   你可以在这个文件里面对你的博客进行配置。需要说明的是_config.butterfly.yml的优先级大于主题文件夹里的_config.yml，hexo会在构建时候优先在_config.butterfly.yml找配置项，找不到再去_config.yml找配置。因此我建议你在_config.butterfly.yml里书写你的配置，并且不要直接把主题的_config.yml内容全部复制到_config.butterfly.yml（如果你全部复制了，会让你的配置文件又臭又长

这边有个小坑，会在你后面使用Github Action出现，我们现在可以进行以下操作进行避免：

1. 删除themes/butterfly/.git文件夹或者移动其他乱七八糟的目录（咱直接删掉了）,这是一个隐藏文件夹，我觉得你应该会删吧（不会去百度

2. 打开根目录.gitignore文件，在尾部追加以下屏蔽项（可以减少不必要的上传）：

   .idea
   themes/butterfly/.git

简单解释一下，第一步的操作是防止butterfly作为子模块而导致无法被提交到源码仓库（第一次提交的时候不能有这个文件夹，后面倒是可以移动回来用于主题升级，但是没有人会用这种方式升级主题吧啊喂）;第二步的操作是屏蔽一些根本就不需要上传的文件或者文件夹。

推送到Github仓库

1. 首先打开New personal access token (classic)，创建一个GithubToken

   

   名字随便填，期限按照图里面选择No Expiration，即无期限，然后权限选择所有repo和workflow。

   然后点击Generate token生成Token,此Token只会出现一次，注意保存！！！（Token大概样子是ghp_xxxxxxxxxxxx）

2. 打开你最开始创建的博客源码仓库，然后点击下图绿色按钮开始创建以下Action环境变量，这关系到你后面能否正常部署，请不要出错

   Name	Secret
   GITHUBTOKEN	你刚才获取的Token
   GITHUBEMAIL	你注册github时使用的邮箱
   GITHUBUSERNAME	你的Github用户名（如果是组织，请使用组织名）

   

3. 创建.github/workflows/deploy.yml文件并输入以下内容（什么，你说没有workflows文件夹，那你不会建一个吗？！大笨蛋）

   name: 自动部署
   # 当有改动推送到master分支时，启动Action
   on:
   push:
      branches:
         - main
         #2020年10月后github新建仓库默认分支改为main，注意更改（唔，我已经帮你改过了，但你要是master分支的话还是改回来啊）
   release:
      types:
         - published
   
   jobs:
   deploy:
      runs-on: ubuntu-latest
      steps:
      - name: 检查分支
         uses: actions/checkout@v3
         with:
         ref: main
   
      - name: 安装 Node
         uses: actions/setup-node@v4
         with:
         node-version: "18.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 gulp-cli -g #全局安装gulp
         npm install --save #安装项目所需的所有依赖项 咱记着--save在npm新版本默认启用，不管了写上总没问题
   
      - name: 生成静态文件 #你要是安装上面追番页面啊，swpp啊，gulp啊，都写在这里
         run: |
         hexo clean
         hexo generate
   
      - name: 部署 # 这一部分最后一行里的master:gh-pages是指从本地的master分支推送到远程的gh-pages分支，git init指令初始化的本地仓库默认是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:gh-pages
   
      # Use the output from the `deploy` step(use for test action)
      - name: Get the output
         run: |
         echo "${{ steps.deploy.outputs.notify }}"

4. 提交代码到Github仓库

   按照下图推送代码到远程仓库，提交信息随便写昂，我写的Deploy Hexo，然后点击提交，弹出窗口就选是，然后再点击同步更改。

   

5. 进入你的博客仓库，设置一下确保你的Github Page功能开启成功

   

   选择Page的Branch为gh-pages，并点击Save保存（如果你是使用了我上面的deploy.yml文件）

   然后打开上面的 Your site is live at https://artmoes.github.io/ 这个网站就是你的hexo线上网址。

自定义域名（CNAME）

前提：拥有一个属于自己的域名（不建议在国内注册域名，建议选择海外的域名注册商，海外不需要实名，比如GoDaddy）

自定义域名非常简单，只需要在根目录的source文件夹里面建立CNAME文件，没有后缀哦。里面写上你自己想自定义的域名。然后在你的域名DNS解析添加CNAME类型的记录到现在这个github默认分配的域名，我的是artmoes.github.io。（你不会不会添加解析吧，这种简单的操作不会你就去Google吧，小笨蛋！

记着提交啊！不会你还是不会吧，明明上面的4. 提交代码到Github仓库里面就教了的说，不许你说不会啊！

到目前为止，你已经成功的部署了Hexo到Github Page,并且采取Github Action构建你的Hexo博客。

常见问题及解决方案

我会在这里收录一些评论区小伙伴遇到的问题，并且在这里贴出，让大家来避坑（不过咱感觉自己的教程够详细且完美了，要是认真看的小朋友应该不会出错吧～