关于javascript:Hexo-搭建与部署指南

26次阅读

共计 5034 个字符,预计需要花费 13 分钟才能阅读完成。

1. 装置与应用 Hexo

hexo 官方网站:链接

1.1 装置

全局装置 hexo-cli,用以创立 hexo 我的项目:

npm install hexo-cli -g

装置实现后,就能够在终端应用 hexo 指令了,能够应用以下指令创立一个 hexo 我的项目:

hexo init hexo-blog
cd hexo-blog
yarn install

实现后我的项目目录如下:

.
├── _config.yml # 网站的根底配置,文档:https://hexo.io/zh-cn/docs/configuration
├── package.json
├── scaffolds # 文章模板
├── source
|   ├── _drafts
|   └── _posts # 你的 markdown 文章就须要寄存在此目录下
└── themes # 寄存主题源码 

1.2 装置第三方主题

npm 装置

Hexo 5.0.0 版本以上,能够应用 npm 装置主题,简略易用、不便降级,但毛病是无奈批改源码。

以 hexo-theme-fluid 主题为例,应用 npm 装置只须要执行:

yarn add hexo-theme-fluid
# 或者
npm install --save hexo-theme-fluid

而后在博客目录下创立 _config.fluid.yml,将主题的 \_config.yml 内容复制进去。

源码装置

源码装置是老版本 Hexo 装置主题的形式,如果你项批改主题的源码也能够很不便的间接批改。

依然以 hexo-theme-fluid 主题为例,在我的项目的 Releases 页面中下载源码文件:

下载解压后,在 themes 目录下创立一个 fluid 目录,将源码复制到该目录下,如下:

利用主题

当你装置胜利后,须要在 _config.yml 中将应用的主题设置为你下载好的主题,找到 theme 配置项,将其批改为:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid

配置第三方主题

如果你是以 npm 形式装置主题,你须要批改你方才在博客目录下创立 _config.fluid.yml 文件批改相干配置;

如果你是以源码形式装置的主题,就不须要创立 _config.fluid.yml 文件了,只须要批改 /themes/fluid/_config.yml 文件中的配置就能够了。

留神:每个主题的配置文件名称都不一样,主题的配置项也不一样,具体须要自行查看你装置主题的阐明文档

2. 部署 Hexo 到服务器

如果你不想理解如何部署网站到服务器上,或者没有属于本人的服务器,你能够跳过这一章节,间接浏览第三节。

2.1 获取编译好的 hexo 动态文件

能够应用 hexo-cli 的 generate 指令来生成动态博客,hexo-cli 曾经将这一指令写入到 package.json,因而你能够应用 npm/yarn 指令来调用构建指令:

yarn build
# 或者
npm run build

博客目录下会生成一个 public 目录,这就是 Hexo 编译好的动态博客,接下来咱们只须要将生成的动态文件部署到服务器上即可。

2.2 Nginx

服务器抉择应用 Nginx 进行部署(of course,你也能够应用 Caddy)。

装置 Nginx

首先在服务器上安装 nginx,以 Ubuntu 为例:

sudo apt install nginx
systemctl enable nginx # 将 nginx 设置为开机启动项
systemctl start nginx # 开启 nginx
systemctl status nginx # 查看 nginx 状态 

官网残缺装置文档:(链接)[https://www.nginx.com/resourc…]

查看 / 批改 Nginx 配置

你能够应用 vim 指令查看 nginx 配置:

vim /etc/nginx/nginx.conf

2.3 部署博客

上传动态资源

应用任意的 sftp 工具,mac 举荐应用 FileZilla,连贯到服务器后,进入服务器的 /var/www/html 目录下,清空目录下原有的文件,而后将方才编译好的 hexo 博客的动态文件上传至该目录下即可。

之后咱们能够间接拜访服务 ip 的 80 端口(即默认 http 的默认端口),就能够看到咱们的网站了。

然而个别正规的网站是不会间接用 ip 拜访的,因而咱们须要为本人的网站绑定一个域名。

为网站绑定域名

进入你的域名解析控制台,以腾讯云的 DNSPod 为示例,点击增加记录,记录类型抉择为 A 类型:

记录值填入你的服务器 ip,即实现了域名与服务器的绑定。

其中的『主机记录』意为二级域名的名称,如果你的域名为 domain.xyz

  • 当你写为 @ 时,用户拜访 domain.xyz 会解析为你的主机 ip
  • 当你写为 * 时,用户拜访 hi.domain.xyzoh.domain.xyz 等任意二级域名都会解析为你的主机 ip(个别不会这么干)
  • 当你写为 www 时,用户拜访 www.domain.xyz 会解析到你的主机 ip

域名绑定胜利后就能够间接应用域名拜访你的博客啦!

3. 应用 github.io 展现网站

Github 提供了一个用以专门展现动态网站的服务,即为 github.io。

如果不是特地对网速有要求(毕竟 github.io 的服务器在国外),举荐你应用 github.io 来部署你的网站,能够省去很多部署步骤,能够完满与 Github Action 进行配合,进行自动化部署博客。

3.1 我的项目上传到 Github

在 Hexo 博客我的项目初始化 git 仓库:

git init

而后在 Github 中创立一个新我的项目仓库,名称必须为 < 你的 github 用户名 >.github.io,创立实现后依照指引将你的博客代码上传到 github。

3.2 开启 Github Pages

在执行这一步之前,先创立一个没有任何代码的新分支,命名为 release

git checkout -b release
rm -f * # 确定你的当前目录没问题,把握不住删除指令的话就手动删除以后文件加的内容
git push --set-upstream origin release # 上传 release 分支 

在我的项目的设置中找到 Github Pages,并将展现分支设置为方才创立的 release 分支:

这就意为这你在 release 上传的任何 html 都能够应用 < 你的 github 用户名 >.github.io 这个域名来拜访了。

咱们切回 master 分支,之后执行 yarn build 将生成的 public 目录下的文件复制一份,而后从新切回 release 分支,将方才复制的内容粘贴到 release 分支下,并上传代码。如果没有操作失误的话,拜访 < 你的 github 用户名 >.github.io 即可看到你的博客了。

3.3 应用 hexo deploy 指令

在上一步,咱们演示了如何手动去将代码部署到 Github Pages 上,实际上 Hexo 提供了一个自动化的指令来帮忙咱们实现这一繁冗的过程,那就是应用 hexo deploy 指令。

然而应用之前要先装置 hexo-deployer-heroku

yarn add hexo-deployer-heroku
# 或者
npm install hexo-deployer-heroku --save

而后在 _config.yml 中找到 deploy 配置项,将其批改为:

deploy:
  type: git
  repo: git@github.com:< 你的 github 用户名 >/< 你的 github 用户名 >.github.io.git
  branch: release

而后再执行 yarn deploy 就能够自动化实现编译博客、切换分支、替换动态文件、上传代码这一系列操作。

4. 应用 Github Action 自动化部署

回顾一下下面的步骤,咱们即便应用了 hexo deploy 指令,其实也很麻烦,须要咱们在本地等漫长的编译过程,编译完了还要更新代码到 github 仓库上。为了简化这一流程,就能够抉择应用 Github Action 来帮咱们做自动化部署。

Github Action 能够实现在一个行为触发之后再执行一些其余的行为,利用这个能力咱们就能够实现当咱们写完一篇文章后,将代码 Push 到 Github 仓库的这一刻,让 Github 来帮咱们实现编译以及部署这个流程,也就是实现继续集成(CI)、继续交付(CD)的这个成果。

对于 Github Action,具体教程能够查看 官网文档。依照文档中所形容的,只有咱们在代码中增加一层 .github/workflows 目录,并且在目录下创立一个 yml 文件来形容具体的行为,就能够实现开启 Github Action。

如下是一个编写好的部署 hexo 博客的 yml 文件,你能够将其写入到 .github/workflows/blog-deploy.yml 文件中:

name: Deploy hexo blog
on:
  push:
    branches:
      - "master"
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          ref: "master"

      - name: Setup node
        uses: actions/setup-node@v3
        with:
          node-version: "14"

      - name: Setup yarn & Install node_modules
        uses: borales/actions-yarn@v3.0.0
        with:
          cmd: install

      - name: Check yarn & node version
        run: |
          echo "Node version is `node -v`"
          echo "Yarn version is `yarn -v`"

      - name: Build & Deploy
        run: |
          git config --global user.name "GitHub Action"
          git config --global user.email "action@github.com"
          sed -i''"s~git@github.com:~https://${{secrets.GH_TOKEN}}@github.com/~" _config.yml
          rm -rf .deploy_git
          yarn clean
          yarn build
          yarn deploy

保留后提交代码后,就能够在你的博客的 Github 我的项目仓库里的 Actions 标签页里找到创立好的 workflow 了,并且当你 push 代码时,这个工作流就会被触发:

但其实它最终会失败的,因为咱们还有一步没有实现。在下面的脚本中应用了一个 Github Action 的 secrets 上下文,即 ${{secrets.GH_TOKEN}} 这里。

${{xxx}} 是 Github Action 中的特定模板语法,能够获取到一些 Github 相干的内置的零碎变量(权且这么说吧),但又区区别与 Github Action 的环境变量。咱们这里获取的 secrets.GH_TOKEN 是 Github Personal access token,获取这个 token 的目标是为了让以后的 Github Action 工作流有向咱们的我的项目推送代码的权限。

首先咱们要获取这个 Token,你能够在你的用户头像菜单里抉择 Setting,进入设置后抉择 Developer settings,再抉择 Persona access token 就能够看到它了:

点击右上角的 Generate new token 按钮生成新的 Token,填写一个你比拟容易辨别的备注后,勾选 repoworkflow 权限,并将 Expiration 过期工夫选为 No expiration

这个 Token 相当重要,千万不能泄露,如过泄露立即重置该 token!!!

点击 Generate token 按钮后,就会生成一个 ghp 结尾的 token,你须要在此复制该 token(前面不能再查看了,只能从新生成):

复制该 token 后,进入到博客仓库的设置中,抉择 Secrets - Actions,点击 New repository secret 按钮生成一个密钥信息:

咱们将密钥名称写为 GH_TOKEN,值填入方才复制的 Github token:

这里所新建的 secret 字段,就能够被 Github Action yml 配置中的 secret 上下文对象所获取到。

至此 Github Action 工作流就能够失常应用了,你能够欢快的开始写你的博客啦,你的每次提交 Github Action 都会帮你进行主动部署,enjoy yourself ~

正文完
 0