手摸手教学之白嫖博客并自动部署(Hexo+GitHub Pages+GitHub Actions)

前言

先赞后看，已成习惯，大家好，我是奉旨撸码的胖大海。

年轻的时候弄了个博客，每年都只会被访问一次……在阿里云给我下续费通牒的时候。

很冤，但抱着”每个前端人都应该有自己的博客“的信念，咬着牙续费了几次。

今年3月份，续费通知如约而至，我再一次来到了历史的岔路口。

此刻，6*12块钱和心中的信仰，站在命运天平的两端，左右摇曳……

如你所见，事情的结局是：TMD我全都要，小孩子才做选择题！

独乐乐不如众乐乐，一篇”手摸手教学之白嫖博客并持续集成“献给各位。

效果前瞻

blog-index

前往围观

技术栈

Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
GitHub Pages
GitHub Pages是 GitHub的网站托管服务。通过简单的配置就可以把你的仓库变成一个静态资源服务器，直接从您的GitHub存储库托管
GitHub Actions
GitHub Actions 是 GitHub 的持续集成服务。持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub Actions允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。
感兴趣的小伙伴，移步阮一峰大佬的GitHub Actions 入门教程。

Hexo项目搭建

白嫖第一步：创建项目并实现本地预览。

1. 全局安装hexo-cli

1	`npm install -g hexo-cli`

2. 初始化项目

1	`hexo init <folder>`

目录结构应该是这样式的

├── _config.landscape.yml
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
└── themes

3. 安装依赖

1 2	`cd <folder> npm i`

4. 运行

1	`npm run server`

浏览器访问http://localhost:4000/

5. 应用主题

有点丑，咱们给换个主题。在知乎看了好多答案，选来选取，还是(张凯强的技术分享)最有眼缘。

5.1. 安装主题hexo-theme-fluid

npm install --save hexo-theme-fluid

5.2. 修改配置

// _config.yml
language: zh-CN
theme: fluid

5.3. 重启服务并刷新页面

舒服了……当然你也可以自己选。hexo官网348款主题总有一款适合你。

6. 构建

1	`npm run build`

执行成功后，项目中会多出一个public目录，如果不托管到Git Pages的话，把它上传到你的静态资源服务器即可。

GitHub Actions自动部署

白嫖第二步：提交代码到GithHub并实现自动部署

1. 在Github新建仓库并提交代码

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:qq9694526/blog.git
git push -u origin main

2. 生成秘钥

参照官方文档生成秘钥， Select scopes仅选择workflow那一项即可。
ps: 创建成功记得复制秘钥

3. 设置秘钥

把上一步复制的秘钥粘贴进去，并起个名字，后面脚本会用到。我这里用的ACCESS_TOKEN

4. 新建actions脚本

在根目录下依次创建.github/workflows/deploy.yml，内容如下

name: Build and Deploy
on:
  push:	
    branches:	
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master
      with:
        submodules: true

    - name: Build and Deploy
      uses: solybum/hexo-deploy@master
      env:
        PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        PUBLISH_REPOSITORY: qq9694526/blog # The repository the action should deploy to.
        BRANCH: blog  # The branch the action should deploy to.
        PUBLISH_DIR: ./public # The folder the action should deploy.