手把手教你搭建一个属于自己的Blog
wkxk 前端攻城狮

技术选型

wkxk的blog,欢迎大家留言互动~

本文介绍采用Hexo+keep+Github Actions这一套技术实现blog搭建及自动化部署。

开始搭建

  1. 安装node,下载地址:nodejs

  2. 安装hexo:

    1
    npm install hexo-cli -g
  3. 初始化博客目录:

    1
    hexo init wkxk.github.io (这里的wkxk换成你自己的英文名)
  4. 初始化完成后,我们就进入我们的目录:

    1
    cd wkxk.github.io
  5. 安装

    1
    npm install
  6. clean一下,然后生成静态页面

    1
    2
    hexo clean
    hexo g

    g 就是generate ,生成的意思

  7. 把你的网站运行起来

    1
    hexo s

    s 就是server ,在服务器运行的意思

  8. 打开你的浏览器,输入 localhost:4000 。 自此,你的个人网站就这么速度的搭建起来了!

    image-20210423170735002

装饰下你的个人网站

修改你的网站中的个人信息

进入你的网站目录,打开 _config.yml 文件,这个文件是用来配置你的网站信息的。

这里列出我的简单配置,具体可以看这个文档

1
2
3
4
5
6
7
title: wkxk's Blog
subtitle: wkxk的个人博客
description: wkxk的个人博客,主要涉及到编程(JavaScript,Vue2,Vue3,Webpack,node),助于个人学习提升,分享学习过程
keywords: JavaScript,Vue2,Vue3,Vite,Webpack,node
author: wkxk
language: zh
timezone: Asia/Shanghai

选一个主题

刚搭建完的网站,是不是觉得有点丑,不符合你的漂亮的脸庞? 反正我是这么觉得的,那么就选一个主题来装饰一下吧,在这里可以选择你要的主题:hexo主题

下载主题

选择好了你的主题之后,就可以下载主题资源了,比如我这里选择一个keep主题来演示一下:

keep主题github地址:https://github.com/XPoet/hexo-theme-keep

keep主题官方文档:https://keep-docs.xpoet.cn/

1
2
# 这里使用npm方式安装方便后期进行代码托管维护
npm install hexo-theme-keep

配置主题

  • 主题下载完之后,在你根目录下的 _config.yml 文件中,修改 theme 为你的主题名字:
1
theme: keep
  • 如果想要自定义hexo-theme-keep主题,可以参考keep主题平滑升级
    • 在博客根目录下的 source目录中新建文件夹_data
    • node_modules下的hexo-theme-keep目录中复制出_config.yml文件到source/_data/中,并重命名为keep.yml
    • keep.yml可根据文档配置对应的属性。

image-20210427190504118

重新生成和运行

1
2
3
hexo clean
hexo g
hexo s

我们可能经常会运行这三个命令,我们可以在package.json中设置:

1
2
3
"scripts": {
"dev": "hexo clean && hexo g && hexo s"
},

我们可以直接使用如下命令一次性的运行:

1
2
3
yarn dev
# 或者
npm run dev

keep主题

image-20210425102523668

博客文章

两种方式来新建你的博文

命令形式

在你的blog目录下使用如下命令:

1
hexo new hello (这里的article写上你的文章的名称)

你的source/_posts下就会生成一个 hello.md文件,在这个文件下就可以写上你的博客内容了。用 Markdown 的语法去写。

直接新建方式

直接点的方式就是直接在source/_posts新建一个 Markdown 文件。

打上标签

打标签能让你的文章方便检索。

打开标签功能:

1
hexo new page tags

这时候你的source/下生成 tags/index.md 文件,我们将其打开,然后把它改成:

1
2
type: "tags"
comments: false

这时候你要为你的文章打上标签就可以在文章的头部写上:

1
2
3
4
5
6
---
title: Vue源码剖析(二) — Vue虚拟DOM
date: 2021-04-23 15:36:27
tags: Vue Virtual DOM
tags: <<其他你想打的标签>>
---

添加分类

分类,归档,是你博客的特性之一。

打开分类功能:

1
hexo new page categories

这说你的source目录下生成 categories/index.md 文件,我们将其打开,把它改成:

1
2
type: "categories"
comments: false

这时候你就可以给你的文章归类存档了,使用方式就是在你的文章的头部加上:

1
2
3
4
5
6
7
---
title: Vue源码剖析(二) — Vue虚拟DOM
date: 2021-04-23 15:36:27
tags: Vue Virtual DOM
categories: Vue源码剖析
categories: <<其他你想分的类>>
---

注意:标签和分类要确定你的配置文件 _config.yml 是否有打开了 tag_dir: tags 和 category_dir: categories。另外,Markdown 的语法是写作最优雅最简洁最简单的,如果之前没用过的建议去学一下Markdown 语法说明,一般一个钟左右就能掌握。因为它和HTML那样简单。

添加评论

keep主题提供评论系统,详情见https://keep-docs.xpoet.cn/usage-tutorial/configuration-guide.html#comment

根据自己的喜好选择一个评论系统,作者使用的gitalk,效果图如下:

image-20210425103835850

部署到线上

可以通过GitHub Pages来创建免费的线上访问地址。

创建Github pages 仓库

创建一个xxx.github.io的 public 仓库,这里的xxx写你的名字,比如我写的是 wkxk.github.io,那么到时我就可以通过 wkxk.github.io 来访问我的网站了。 创建完成之后,那么你就有自己的 Git 地址了。

安装 hexo-deployer-git

1
2
cd wkxk.github.io
npm install hexo-deployer-git --save

配置你的Git

打开你的配置文件_config.yml

1
2
3
deploy:
type: git
repo: https://github.com/xxx/xxx.github.io.git // 输入你的git地址

推送你的网站到Github上

1
hexo d

d 就是 deploy , 部署上去的意思。

访问你的网站

直接在浏览器输入你的 xxx.github.io 就可以访问了。

绑定自己的域名

添加 CNAME 文件

1
2
3
4
# 进入sources
cd sources
# 创建CNAME文件,写入自己的域名,如:www.iwkxk.com
touch CNAME

在你的域名商后台进行 DNS 解析添加两条记录:

1
2
3
4
5
6
7
1. 主机记录: @
记录类型:A
记录值:192.30.252.154 或者 192.30.252.153

2. 主机记录: www
记录类型: CNAME
记录值: xxx.github.io (这里就是你的github仓库名称)

GitHub 设置域名

在你的 GitHub 设置域名,在你的 GitHub 博客项目中点击 Settings,在 GitHub Pages 下的 Custom domain 写上你的域名,然后 save。

image-20210425112628662

自动部署

根据之前的步骤我们使用 Hexo + Keep 主题搭建了一个在线博客,下面教你如何使用 GitHub Actions 将博客自动部署到 GitHub Pages。

购买服务器

我这里买的搬瓦工服务器,大家可以根据自己的需求选择阿里云,百度云的都是可以的。

GitHub Actions

创建 GitHub 仓库
  • 创建一个私有仓库用来存储 Hexo 项目源代码。(保证你的重要信息不泄露)

    text仓库的master分支用来存放源代码

image-20210425113102571

  • 公共仓库用来存储编译之后的静态页面。(这里就不用在创建仓库了,之前我们部署过github pages到xxx.github.io)

    xxx.github.io这个仓库的master分支用来存储静态文件

当私有仓库的 master 有内容 push 进来时(例如:主题文件,文章 md 文件、图片等), 会触发 GitHub Actions 自动编译并部署到公共仓库的 master分支。

创建 GitHub Token
  • 创建一个有 repoworkflow 权限的 GitHub Token

image-20210425113739235

  • 新生成的 Token 只会显示一次,如有遗失,重新生成即可。

image-20210425113910416

创建 repository secret
  • 将上面生成的 Token 添加到私有仓库的 Secrets 里,并将这个新增的 secret 命名为 HEXO_DEPLOY (名字无所谓,看你喜欢)。

  • 步骤:私有仓库 -> settings -> Secrets -> New repository secret

image-20210425114136730

新创建的 secret HEXO_DEPLOY 在 Actions 配置文件要用到,需跟配置文件保持一致!

添加 Actions 配置文件
  1. 在你的 Hexo 项目根目录下创建 .github 文件夹。
  2. .github 文件夹下创建 workflows 文件夹。
  3. workflows 文件夹下创建 hexo-deploy.yml 文件。

image-20210425114312617

hexo-deploy.yml 文件配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
name: deploying Hexo project to GitHub pages
on:
push:
branches:
- master # master 分支有 push 行为时就触发这个 action

jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master

- name: Build and Deploy
uses: theme-keep/hexo-deploy-github-pages-action@master # 使用专门部署 Hexo 到 GitHub pages 的 action
env:
PERSONAL_TOKEN: ${{ secrets.HEXO_DEPLOY }} # secret 名
PUBLISH_REPOSITORY: wkxk/wkxk.github.io # 公共仓库,格式:GitHub 用户名/仓库名
BRANCH: master # 分支,我这里是推送到wkxk/wkxk.github.io仓库里的master分支(根据自己的仓库进行填写)
PUBLISH_DIR: ./public # 部署 public 目录下的文件

在上面的配置文件中,使用了 theme-keep 组织封装的 hexo-deploy-github-pages-action ,是一款专门部署 Hexo 博客到 GitHub pages 的 action,欢迎大家 StarFork

自动部署触发流程
  • 修改你的 Hexo 博客源代码(例如:增加文章、修改文章、更改主题、修改主题配置文件等等)。

  • 把你修改过的 Hexo 项目内容(只提交修改过的那部分内容) push 到 GitHub 公共仓库(本例:test)的 master 分支。

  • GitHub Actions 检测到 master 分支有内容 push 进来,会自动执行 action 配置文件的命令,将 Hexo 项目编译成静态页面,然后部署到私有仓库的 master 分支。

  • 在私有仓库的 Actions 可以查看到你配置的 action。

image-20210425114717303

总结

  • 至此一个从0到1使用hexo+keep主题,集成Github Actions自动部署功能的blog就诞生了。

  • 另外,keep主题提供很多的功能,大家可以根据keep文档去做相应的配置。

作者blog预览

image-20210425120015256image-20210425120049711

image-20210425120153920image-20210425120226108

image-20210425120302108

如果这篇文章对你有所帮助,可以点赞留言支持下作者,你们的支持是我坚持的动力哈~

文章参考

  • Post title:手把手教你搭建一个属于自己的Blog
  • Post author:wkxk
  • Create time:2021-04-23 16:55:58
  • Post link:http://www.iwkxk.com/2021/04/23/手把手教你搭建一个属于自己的Blog/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments