Hexo搭建过程
❤️🔥 这里只是记录了我在搭建博客时的一些经历,可能不够完善,希望对大家有所帮助。
主要是主题部分还没写,等有空余时间时,我想我一定会继续完善的。
现在我就像我头像旁边的图标一样,在摸鱼中 🐟,嘻嘻!
那么我们开始吧!👀
准备工作
安装 Hexo 之前要安装 Git
、Node.js
这两个工具
安装 Git
这里以 Windows 为例,因为这也是我第一次搭建博客,其它系统还不清楚。
点击 git去官网下载 ,如果网速不好,可以去 Github 参考 这个项目 下载
安装 Node.js
可以去官网下载
安装 Hexo
安装好后,即可打开终端,使用 npm 完成 Hexo 的安装。
npm install -g hexo-cli
搭建 Hexo
完成以上工作后,便可以建造网站了。🍭
搭建网站
首先我们要选择一个自己喜欢的位置,建立博客根目录,可以直接新建文件夹,也可以用下面的命令,[hexo_blog]
可以自己修改。
mkdir [hexo_blog]
然后对该文件夹进行 Hexo 初始化:
hexo init [hexo_blog]
等待一段时间之后,便初始化成功了。
然后我们执行下面这两个命令:
cd [hexo_blog]
hexo g
完成之后,便可以执行 hexo s
生成网址 localhost:4000
来预览博客初始样子。这里端口号可能会不同,注意提示信息即可。
在终端使用 Ctrl + C 结束命令。
Hexo 指令
这里我就只记录一些我自己经常用到的一些指令,一般为简写。
hexo init .
:初始化博客hexo new page <name>
:新建文件夹hexo new <title>
:新建title.md
文件
还有最常用的两个 hexo 三连 :
- 本地预览:
hexo clean && hexo g && hexo s
- 发布网站:
hexo clean && hexo g && hexo d
平常修改时一般只用
hexo s
来查看境况,若遇到啥问题时,可以使用hexo clean
来清理网页缓存。
想了解 hexo 更多常用命令可以跳转官网查看。
部署 Hexo
我之前部署到过 Netlify ,但是有时会访问不了,就不展开叙述了。下面我便讲一讲部署到 GitHub 的过程吧。
创建仓库
既然要部署到 GitHub 怎么可以没有一个仓库呢?这里我就默认搭建注册过账号了,如果没有,前往 GitHub 注册干嘛,愣着呀!
下面要用到的注释放在这里了,用户名:userName
,注册邮箱:userEmail
。
- 新建一个公开仓库,
右上角搜索旁边的加号
->New repository
- 填写信息:
- 仓库名
Repository name
格式为userName.github.io
,创建完成之后,记得复制仓库的 SSH。(HTTPS 同样可以使用,但我全是用的 SSH,没用过 HTTPS,也就不写了,望谅解。❤️🔥) - 属性:
Public
- 直接创建
Create repository
即可
待我们创建完仓库之后
相关配置
右键博客根目录,点击 Git Bash
,接下来指令我就都在这里执行了
安装插件
$ npm install hexo-deployer-git --save
$ npm install hexo-server --save
配置 Git
在 Git Bash
中执行以下两条命令配置你的用户名和邮箱,这里建议用户名 userName
和邮箱 userEmail
与你的 GitHub 用户名和邮箱保持一致。
$ git config --global user.name "userName"
$ git config --global user.email "userEmail"
配置密钥
依旧是在 Git Bash
下执行指令
$ ssh-keygen -t rsa -C "userEmail"
接着会出现 Enter file in which to save the key
,回车即可。
之后会出现让我们设置密码的情况,Enter passphrase (empty for no passphrase):
,若直接回车,则是无密码。接着再输一遍密钥。
注意第二遍输入密码之后会在过程中出现 Your public key has been saved in
字样,找到后面跟着的文件路径,用记事本打开 id_rsa.pub
,全选复制即可。
💡 注意:id_rsa
是你这台电脑的私人秘钥,不能给别人看,而 id_rsa.pub
是公共秘钥,无所谓。这个公钥的用处就是,当你链接 GitHub 自己的账户时,会你的私钥,匹配成功,才能通过 git 上传你的文件到 GitHub 上。
接着便是把公钥内容放到 GitHub 上。步骤如下
右上角头像 -> Settings
-> 点击左边 SSH and GPG keys
-> 点击 New SSH key
.
其中 Title
随便填写,Key
填写前面复制的 id_rsa.pub
内容。
接下来在 Git Bash
中执行以下指令:
ssh -T [email protected]
若之前设置了密钥,要输入密码。当出现 You've successfully authenticated
字样时,就表示你已经成功了。
配置文件
那麽好,完成以上操作后,接下来便是对于 Hexo 根目录下 _config.yml
配置文件的相关配置了。
打开配置文件 _config.yml
,划到代码最后,修改 deploy
的内容。
deploy:
type: git
repository: SSH
branch: main
其中 repository: SSH
部分的 SSH 便是创建初始公开仓库时的那个,形式如下:[email protected]:userName/userName.github.io.git
。
好,那么好,我们已经快成功了,接下来便是 Hexo 三连
hexo clean
hexo g
hexo d
接下来,打开 Github 的博客仓库,便会看到文件已经上传成功,此时打开 https://userName.github.io
便可以看到 Hexo 博客了。
这里我建议到 Hexo 官方 去查看相关文档,那里讲的很详细了。
Hexo 主题
主题的内容我以后在写吧,这里埋下一个大坑 🕳️👀
但是后面自动部署大家还是要看的
自动部署
这里我们使用 Github Action 来完成自动部署。下面是详细步骤。
创建 Token
首先要创建 token
,点击这里跳转。
创建的 token 名称(Note) 随意,有效期(Expiration) 随便,这里我选择(No expiration),节省以后调整的麻烦。勾选 repo
项 和 workflows
项。点击Generate token
创建即可。
!注意,要记录下来生成的 token,一旦忘记,就只能重新配置了。
创建私有仓库
创建完 token 后,我们接着创建用来存放博客源码的私有仓库。Repository name
随便,这里以 BlogScoure
为例,属性为 Private
.
配置 Github Action
接下来便是对于 Github Action 的配置
在博客根目录下 .github
文件下创建 workflows
文件夹,再 workflows
内创建 deploy.yml
文件,用于配置自动部署指令。在 deploy.yml
里面输入如下代码。
name: 自动部署
on:
push:
branches:
- main
release:
types:
- published
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: 检查分支
uses: actions/checkout@v2
with:
ref: main
- name: 安装 Node
uses: actions/setup-node@v1
with:
node-version: "16.x"
- 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-npm.outputs.cache-hit != 'true' }}
run: |
npm install --save
- name: 生成静态文件
run: |
hexo clean
hexo generate
- name: 部署到Github
uses: JamesIves/github-pages-deploy-action@v4
with:
token:
repository-name:
branch: main
folder: public
commit-message: "${{ github.event.head_commit.message }}"
接着要填写 yml 文件最后一部分 部署到Github
中的内容, token
为第一步中创建的那个,repository-name
为博客仓库 Noachlu/Noachlu.github.io
(填写自己的)。
代码部分完成后,要保护密钥安全性,我们可以打开创建的私有仓库BlogScoure
,点击Settings
-> Secrets and variables
-> Actions
-> New repository secret
,名称随便,但要全部大写字母和 _
字符。内容填写第一步创建的 token
,然后 Add Secret 即可。
重新设置远程仓库和分支
删除 .git
首先删除 博客根目录/themes/xxxx/.git
,删除 .git
文件夹,要注意该文件夹是隐藏的。
之后在根目录运行以下指令
git init
git remote add origin [私有仓库的SSH]
git checkout -b main
添加屏蔽项
将指定内容不上传到 github 上。这样可以减少需要提交的文件量和加快提交速度。
在 博客根目录/.gitignore
文件中替换以下内容:
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git*/
.idea
themes/xxxx/.git
最后一行 xxxx 换成自己使用的主题
提交到 Github
git add .
git commit -m "First update"
git push origin main
以后都使用这三个代码进行提交,其中 First update
按照自己情况进行修改。
若嫌麻烦,可以在博客根目录下创建 push.bat
脚本,在里面输入以下内容:
@echo off
git add .
git commit -m "First update"
git push origin main
pause
使用时双击脚本即可自动执行命令。
查看部署情况
打开私有仓库,点击 Action
-> 刚刚提交的commit
-> deploy
,查看情况。若全是 √,则部署成功。