共计 5262 个字符,预计需要花费 14 分钟才能阅读完成。
本文最后公布于我的集体博客 Bambrow’s Blog,采纳 BY-NC-SA 许可协定,转载请注明出处。若有后续更新,将更新于原博客。欢送去我的博客浏览更多文章!
本文具体记录一下站点建设过程,以便查阅。对于具体的细节则不会做过多解释,次要展现步骤。这一篇次要讲述筹备工作、首次部署与主动部署的相干内容。
本文运行环境:
node: v14.4.0
npm: 6.14.7
hexo: 4.2.1
hexo-cli: 3.1.0
筹备工作
筹备工作次要参考了 Hexo 官网文档。
装置 Git 与 Node.js
在 Mac 上最不便的办法当然是通过 Homebrew。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
留神,可能在装置之前须要先装置 Command Line Tools for Xcode。间接在终端输出 xcode-select --install
装置。
装置好 Homebrew 后,间接应用以下命令:
brew install git
brew install node
在装置以上两个依赖之前,能够先运行 brew update
来更新 Homebrew。此外,还能够运行 brew doctor
检查一下有没有什么抵触,能够及时处理。也能够把以下语句退出你的 .bash_profile
或者.zshrc
,取决于你应用的 shell:
export PATH="/usr/local/bin:$PATH"
装置好后,能够用以下命令查看是否装置胜利,胜利则会返回版本号:
git --version
npm -v
装置 Hexo
间接应用 npm
装置:
npm install -g hexo-cli
查看一下 hexo
是否装置胜利,会返回以后的 hexo
版本号:
hexo -v
注册 GitHub 并新建集体仓库
GitHub 就不必多说了。注册实现后,新建私有仓库,名称为 你的 GitHub 用户名.github.io
。这个仓库用来寄存渲染好的页面。
此外,咱们再新建一个公有仓库,用来寄存源文件自身。仓库的名字任意取,我取的名字是blog
。
这两个仓库最好不要初始化任何货色,也就是 README
,.gitignore
和license
都不要。这样新建的仓库齐全是空的。
设置 Git 与密钥文件
首先运行以下两句进行 Git 配置:
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 注册邮箱"
其中把用户名和邮箱替换成你本人的。而后咱们生成密钥文件:
ssh-keygen -t rsa -C "GitHub 注册邮箱"
间接一路回车上来就好,完结后会在 ~/.ssh/
文件夹里生成 id_rsa
私钥文件与 id_rsa.pub
公钥文件。咱们读取一下公钥的内容并且手动拷贝:
cat ~/.ssh/id_rsa.pub
手动复制显示的内容。随后关上这个页面设置 SSH Key。你也能够在 GitHub 主页点击你的右上角头像,抉择 Settings,而后抉择 SSH and GPG Keys 找到这个界面。点击 New SSH Key,题目能够轻易写,内容就是你方才复制的公钥内容,随后保留。
开始建站
博客初始化
首先抉择一个你喜爱的中央作为你的博客根目录。
mkdir ~/git/ 你的 GitHub 用户名.github.io
随后依照官网教程,顺次运行:
hexo init ~/git/ 你的 GitHub 用户名.github.io
cd ~/git/ 你的 GitHub 用户名.github.io
npm install
当初博客曾经初始化实现了。应用以下命令:
hexo server
就能够在 http://localhost:4000 看到你的站点了。能够在终端里应用 control+c
关掉本地服务器。上面列举一些罕用的命令,更多命令与参数能够参考这里:
hexo clean
用于革除缓存与动态文件。hexo new "文章题目"
用于新建文章。hexo server
用于启动本地服务器查看渲染好的网页,可简写为hexo s
。hexo generate
用于生成动态文件,可简写为hexo g
。hexo deploy
用于部署网站,须要先设置好_config.yml
,可简写为hexo d
。
设置_config.yml
首先,能够参考官网的设置页面,这里只波及一些外围设置。
用你喜爱的编辑器关上根目录下的 _config.yml
(留神不是themes
文件夹外面的_config.yml
)。
在 Site
上面你能够更改网页的题目、副标题、形容、作者、语言、时区等等。语言这里抉择 zh-CN
。在URL
上面能够把 url
改为你的 GitHub Pages 的 URL,https:// 你的 GitHub 用户名.github.io
。两头的大部分设置跳过,你也能够参照下面的网页进行批改。
最初,咱们重点关注一下# Deployment
。在这里,咱们须要把它改为如下的款式:
deploy:
type: git
repo: 你的 GitHub 目录地址
branch: master
其中 repo
要依据本人的状况批改。你能够在 GitHub 主页点击你的头像,抉择 Your repositories,点击你的 你的 GitHub 用户名.github.io
仓库,点击 Code 按钮,而后点击 Use SSH(如果目前显示为 Clone with HTTPS),而后复制框中的内容到这里。
批改好后,保留文件。
首次部署
咱们须要再装置一个依赖:
npm install hexo-deployer-git --save
随后所有就绪,顺次运行:
hexo clean
hexo g
hexo d
而后你就能够在 https:// 你的 GitHub 用户名.github.io
看到渲染好的网页了。
设置主动部署
在这一步里咱们不仅备份了博客的源文件,也实现了批改 push 到 blog
公有仓库后触发 GitHub Actions 实现主动部署。
将源文件备份至公有仓库
在终端,本人的 GitHub 用户名.github.io
文件夹内,手动增加近程仓库:
git init
git remote add origin git@github.com:bambrow/blog.git
这里的近程仓库就是你的 blog
仓库。把下面的 git@github.com:bambrow/blog.git
批改成你本人的仓库地址。办法同样是在网页进入 blog
仓库,点击 Code 按钮,而后点击 Use SSH(如果目前显示为 Clone with HTTPS),而后复制框中的内容到这里。
随后咱们编辑一下 .gitignore
文件。能够应用你喜爱的编辑器。一般来讲,.gitignore
应该有如下内容:
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
编辑好之后,先做:
git pull origin master
随后把所有应该备份的文件 push 到 GitHub:
git add .
git commit -m "initial commit"
git push origin master
此时去 GitHub 上查看 blog
仓库,会发现内容曾经更新。
设置 GitHub Actions
请留神,在做这一步之前,请务必确认本人的 blog
仓库是公有仓库,如果不是,肯定要在设置里将其设置为公有。
之前建设好的密钥文件,有公钥也有私钥。咱们曾经用过了公钥,这次应用私钥。首先读取其内容并手动拷贝:
cat ~/.ssh/id_rsa
手动复制全部内容。随后在网页上关上本人的 blog
仓库,点击 Settings,再点击左侧的 Secrets,随后新建。名称能够随便写,这里举荐HEXO_DEPLOY_KEY
;内容则是方才复制的私钥全部内容。随后点击增加。
随后,咱们开始设置工作流。点击你的仓库标签下的 Actions,抉择新建 New workflow。随后抉择 set up a workflow yourself,将 main.yml
的内容替换如下,你也能够自行批改:
# 工作流名称
name: Hexo Blog Deploy
# 只在 push 到 master 分支的时候启动
on:
push:
branches:
- master
# 应用 ubuntu 虚拟机
jobs:
build:
runs-on: ubuntu-latest
# 工作流步骤
steps:
- name: Checkout repository master branch
uses: actions/checkout@master
with:
submodules: true
# 装置 Node.js
- name: Install node.js
uses: actions/setup-node@master
with:
node-version: "10.x"
# 装置 Hexo
- name: Install hexo
run: |
npm install hexo-cli -g
npm install
# 设置 SSH 密钥,读取 HEXO_DEPLOY_KEY
- name: Setup private key
env:
HEXO_DEPLOY_KEY: ${{secrets.HEXO_DEPLOY_KEY}}
run: |
mkdir -p ~/.ssh/
echo "$HEXO_DEPLOY_KEY" > ~/.ssh/id_rsa
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
# 配置 Git 设置
- name: Setup git settings
run: |
git config --global user.name "GitHub 用户名"
git config --global user.email "GitHub 邮箱"
# 更改下面的用户名和邮箱
# 部署
- name: Deploy hexo
run: |
hexo clean
hexo generate
hexo deploy
随后点击 Start commit 完结设置。这样当前只有有新的改变被 push 到 blog
的主分支,就后触发这个工作流,将网页渲染进去,同时也会 push 到 你的 GitHub 用户名.github.io
这个仓库里。
装置 Markdown 语法扩大
Hexo
原生的 Markdown 渲染插件反对的 Markdown 语法不够丰盛,比方不反对 GitHub Flavored Markdown、CommonMark、上标下标、脚注等等。因而,咱们在写文章之前,能够把原生的插件 hexo-renderer-marked
改为hexo-renderer-markdown-it
。
首先,依据该插件的装置指南,运行以下命令:
npm uninstall hexo-renderer-marked
npm install hexo-renderer-markdown-it
随后在 _config.yml
里增加如下语句(能够增加在 deploy
后面):
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSide: 'left'
permalinkSymbol: ¶
随后你就能够应用扩大语法了。应用办法能够参看这里和这里,尤其是后一个网页给出了很具体的例子。
如果你感觉脚注字体偏大,能够看我的字体设置文章,看完后就晓得怎么批改了。我集体做了如下设置:
.footnotes {font-size: 75%;}
因为咱们引入了新的插件,所以也要改一下工作流文件,在 装置 Hexo
那一步加一些步骤,装置这些依赖。你能够在本地批改 .github/workflows/main.yml
的内容,也能够在 GitHub 的 blog
仓库,点击 Actions,抉择最近的一次部署,点击右侧的省略号中的 View workflow file,而后点击右侧的铅笔按钮进行批改。将新的依赖装置写在 npm install
那一行前面即可。如果你采纳后者,在你将本地新的改变 push 到 GitHub 之前,要记得先做git pull
,否则会报错显示近程仓库有新的改变。举荐在本地批改,一步到位。
run: |
npm install hexo-cli -g
npm install
+ npm uninstall hexo-renderer-marked
+ npm install hexo-renderer-markdown-it
本篇文章由一文多发平台 ArtiPub 主动公布