本文最后公布于我的集体博客Bambrow's Blog,采纳 BY-NC-SA 许可协定,转载请注明出处。若有后续更新,将更新于原博客。欢送去我的博客浏览更多文章!

本文具体记录一下站点建设过程,以便查阅。对于具体的细节则不会做过多解释,次要展现步骤。这一篇次要讲述筹备工作、首次部署与主动部署的相干内容。

本文运行环境:

node: v14.4.0npm: 6.14.7hexo: 4.2.1hexo-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 gitbrew install node

在装置以上两个依赖之前,能够先运行brew update来更新Homebrew。此外,还能够运行brew doctor检查一下有没有什么抵触,能够及时处理。也能够把以下语句退出你的.bash_profile或者.zshrc,取决于你应用的shell:

export PATH="/usr/local/bin:$PATH"

装置好后,能够用以下命令查看是否装置胜利,胜利则会返回版本号:

git --versionnpm -v

装置Hexo

间接应用npm装置:

npm install -g hexo-cli

查看一下hexo是否装置胜利,会返回以后的hexo版本号:

hexo -v

注册GitHub并新建集体仓库

GitHub就不必多说了。注册实现后,新建私有仓库,名称为你的GitHub用户名.github.io。这个仓库用来寄存渲染好的页面。

此外,咱们再新建一个公有仓库,用来寄存源文件自身。仓库的名字任意取,我取的名字是blog

这两个仓库最好不要初始化任何货色,也就是README.gitignorelicense都不要。这样新建的仓库齐全是空的。

设置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.iocd ~/git/你的GitHub用户名.github.ionpm 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 cleanhexo ghexo d

而后你就能够在https://你的GitHub用户名.github.io看到渲染好的网页了。

设置主动部署

在这一步里咱们不仅备份了博客的源文件,也实现了批改push到blog公有仓库后触发GitHub Actions实现主动部署。

将源文件备份至公有仓库

在终端,本人的GitHub用户名.github.io文件夹内,手动增加近程仓库:

git initgit 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_StoreThumbs.dbdb.json*.lognode_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-markednpm install hexo-renderer-markdown-it

随后在_config.yml里增加如下语句(能够增加在deploy后面):

# Markdown-it config## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wikimarkdown:  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主动公布