我的个人博客网站搭建全记录(Hexo+GitHub Pages+GitHub Actions)

·  阅读 953

前言

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

年轻的时候弄了个博客,每年都只会被访问一次(在阿里云给我下续费通牒的时候)。很冤,但抱着”每个前端人都应该有自己的博客“的信念,咬着牙续费了几次。今年3月份,续费通知如约而至,我再一次来到了历史的岔路口。此刻,6*12块钱和心中的信仰,站在命运天平的两端,左右摇曳……

如你所见,事情的结局是:QTMD我全都要,小孩子才做选择题!

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

效果前瞻

blog-index

前往围观

技术栈

  • Hexo

    一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

  • GitHub Pages

    GitHub的网站托管服务。通过简单的配置就可以把你的仓库变成一个静态资源服务器, 直接从您的GitHub存储库托管

  • GitHub Actions

    GitHub 的持续集成服务。持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub Actions允许开发者把每个操作写成独立的脚本文件,存放到代码仓库,使得其他开发者可以引用。

    感兴趣的小伙伴,移步阮一峰大佬的GitHub Actions 入门教程

Hexo项目搭建

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

1. 全局安装hexo-cli

npm install -g hexo-cli
复制代码

2. 初始化项目

hexo init <folder>
复制代码

目录结构应该是这样式的

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

3. 安装依赖

cd <folder>
npm i
复制代码

4. 运行

npm run server
复制代码

浏览器访问http://localhost:4000/ image-20210419192733280

5. 应用主题

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

5.1. 安装主题hexo-theme-fluid

npm install --save hexo-theme-fluid
复制代码

5.2. 修改配置

// _config.yml
language: zh-CN
theme: fluid
复制代码

5.3. 重启服务并刷新页面

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

6. 构建

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. 设置秘钥

image-20210420094437071 把上一步复制的秘钥粘贴进去,并起个名字,后面脚本会用到。我这里用的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.

复制代码

它的作用就是当main分支有代码提交时,自动构建并发布到blog分支。

这里需要修改PERSONAL_TOKEN、PUBLISH_REPOSITORY和BRANCH为自己的

Ps: 这是我在Actions库里搜hexo抄来的,大家也可以自行选择。

5. 效果展示

现在提交任意代码后,脚本会被触发,且在Actions能看到脚本执行情况。

image-20210420100156617 等待执行完毕,切换到blog分支(上面.yml倒数第二行有配置),可以看到构建后的代码被提交到了这里。

image-20210420100330332

以后咱们每次在main push代码,GitHub Actions都会自动的帮我们构建并发布到远程分支

GitHub Pages托管网站

白嫖第三步:网站托管并设置域名,实现通过域名访问博客

1. 设置

这个设置就是把你的仓库变成一个静态资源服务器

image-20210420100644607

2. 域名解析

没有域名的请直接第四步 这是我在阿里云域名的解析配置

image-20211115094130823

3. 设置自定义域名

image-20211115094839294

保存后,就可以通过www.zhaohaipeng.com/访问了

4. 不自定义域名

如果不自定义域名,咱们可以直接通过qq9694526.github.io/blog/访问,但打开… Hexo官网中有相关说明

如果您的网站存放在子目录中,例如 http://example.com/blog,则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。咱们需要修改构建配置,在_config.yml中新增根路径配置

// _config.yml
root: '/blog/'
复制代码

可以本地npm run build验证下结果。看到public/index.html中(拉到最下面)js路径有以下变化,说明配置已生效。

<script  src="/js/boot.js" ></script>
<script  src="/blog/js/boot.js" ></script>
复制代码

现在提交代码、触发Actions成功后,qq9694526.github.io/blog/就可以正常访…

图床

在Markdown编写过程中,不可避免的需要插入图片。

我一开始的操作极其繁琐:先是把本地图片放到项目source/img目录下,然后push到github触发自动部署,等成功后复制图片地址,最后再回到Markdown修改图片链接。

极度不舒适!随后搁网上查看了很多方案,试了一些。

最终选择了:Typora + PicGo + 七牛云。

  • Typora:世界上最漂亮的Markdown编辑器,支持右键自动上传图片。

  • PicGo:一个用于快速上传图片并获取图片 URL 链接的工具,支持七牛等7种图床。

  • 七牛云:提供免费的存储空间(10G)。优点是比github快,缺点是需要实名认证和一个备案过的域名。七牛提供的测试域名域名仅有1个月失效。

    七牛融合 CDN 测试域名(以 clouddn.com/qiniucdn.com/qnssl.com/qbox.me 结尾),每个域名每日限总流量 10GB,每个测试域名自创建起30个自然日后系统会自动回收,仅供测试使用并且不支持 Https 访问,详情查看七牛测试域名使用规范。点击下列域名可查看每个域名剩余回收时间。

操作步骤大致如下:

  1. 注册七牛云并创建存储空间

  2. 安装PicGo并配置七牛图床

  3. 在Typora中设置PicGo

详细的图片教程可以参看CodeSheep的白嫖七牛云作为个人博客免费图床

常见问题

1. 自动化部署后自定义域名丢失

​ 在source新增CNAME文件

2. 文档描述不具体、不理解配置项的作用?

​ 可以通过查看主题源码中的.ejs文件,分析配置的作用和获取文档中未说明的配置项

参考链接

  1. Hexo主题hexo-theme-fluid
  2. GitHub Actions 入门教程
  3. 图片资源pixabay
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改