从0到1搭建个人博客

博客
,

目的

本文意在帮助开发同学快速、高效的搭建个人博客；

技术栈

node、hexo、腾讯云 Serverless Framework（ssr、云函数、云托管、cos 等）；

起步

首先在自己的 github 中创建一个同名的.github.io 的仓库（如：github 名为 test，就需要创建一个名为 test.github.io 的仓库）；

全局安装 hexo 命令行工具：

1
$ npm install hexo-cli -g

初始化项目

1
2
3
4

$ hexo init test # test是项目的名称，自定义；
$ cd test # test是项目的名称，自定义；
$ npm install

初始化完成后，会自动生成一个项目，目录结构长这样：

1
2
3
4
5
6
7
├── _config.yml // 项目配置文件
├── package.json
├── scaffolds // 博客模板文件
├── source // 协作主体文件
|   ├── _drafts // 草稿文件
|   └── _posts // 文章文件，所有文章都放在这里面即可
└── themes // 博客皮肤主体文件，更换博客皮肤时用到

配置

我们可以在_config.yml 文件中配置博客的基本信息：

1
2
3
4
5
6
7
8
# Site
title: "辰总的blog"
subtitle: "个人博客，技术文章，生活随笔，记录优秀的文章"
description: "JavaScript、Node、Vue、React、生活随笔、记录优秀的文章"
keywords: "JavaScript、Node、Vue、React、生活随笔、记录优秀的文章"
author: lgc
language: zh-cmn-Hans
timezone: "Asia/Shanghai"

写作

我们写文章主要是在_posts 目录下,_drafts 是草稿目录，如果文章不想被发表，可暂时存放到这里：

1
2
3
├── source // 协作主体文件
|   ├── _drafts // 草稿文件
|   └── _posts // 文章文件，所有文章都放在这里面即可

layout 布局文件夹。用于存放主题的模板文件，决定了网站内容的呈现方式，Hexo 内建 Swig 模板引擎，您可以另外安装插件来获得 EJS、Haml、Jade 或 Pug 支持，Hexo 根据模板文件的扩展名来决定所使用的模板引擎，例如：

1
2
layout.ejs   - 使用 EJS
layout.swig  - 使用 Swig

执行 hexo server 启动 hexo 本地服务器，可以看到项目生成了一个 demo 文章（hexo server -p xxxx，可自定义端口）：

所有文章的写作使用的是markdown语法，文件名最好是日期-文章内容的方式（如：20200915-blog.md），后缀名是.md；

image-20200911172630511

Front-matter

Front-matter 是文件最上方以 — 分隔的区域，用于指定个别文件的变量，举例来说：

1
2
3
4
5
6
7
8
9
---
title: 大家好 // 页面的标题
categories:
  - aaa // 文章分类
tags:
  - bbb // 文章标签
  - ccc
---
...other code

可以看到页面中的标题，分类都加上了

image-20200911172630511

常用的变量列表如下：

参数 描述 默认值
layout 布局
title 标题 文章的文件名
date 建立日期 文件建立日期
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签（不适用于分页）
categories 分类（不适用于分页）
permalink 覆盖文章网址

主题

hexo 提供了很多现成的主题供大家选择,大家选择自己喜欢的即可，这里选择cactus-一款比较经典的 hexo 主题演示：

在项目根目录 clone 项目：

1
$ git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

在_config.yml 中配置博客的主题即可：

1
2
# theme: landscape
theme: cactus

重新 hexo server 后可以看到新的主题了：

image-20200911172630511

image-20200911172630511

自定义顶部导航信息
默认主题会提供以下导航信息

1
2
3
4
5
nav:
  Home: /
  About: /about/
  Writing: /archives/
  Projects: http://github.com/probberechts

如果我们要增加只要在下面增加一个变量，配置一下路由即可

1
2
nav: ...
  haha:/

image-20200911172630511

添加百度统计,按照指引开通绑定项目：然后修改配置文件：

1
2
3
4
# Fill in your Baidu Analytics tracking ID to enable Baidu Analytics.
baidu_analytics:
  enabled: true
  id: 2e6da3c375c8a87f5b664cexxx # id=百度统计为应用分配的id

添加评论系统

本教程使用的是valine-一款无需登录、配置方便的评论系统；

先登录或注册 LeanCloud, 进入控制台后点击左下角创建应用：

image-20200911172630511

应用创建好以后，进入刚刚创建的应用，选择左下角的设置>应用Key，然后就能看到你的APP ID和APP Key了：

image-20200911172630511

添加配置文件：

1
2
3
4
5
6
7
8
9
10
valine:
  enable: true
  app_id: 0AQiakktufEkOkBGRTG7OMOA-xxx
  app_key: K7A8Rj80r3C59gYyLjJ9Bxxx
  notify: false #邮件提醒设置
  verify: false #验证码设置
  placeholder: ヾﾉ≧∀≦)o快来评论一下吧! #placeholder
  avatar: #头像设置
  pageSize: 10
  visitor: true

然后进入主题的 layout=>_partial=>comments.ejs，加入以下代码，使其支持评论系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%if (theme.valine.app_id && theme.valine.app_key) {%>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>
<!--<script src="//cdn.jsdelivr.net/npm/leancloud-storage@latest/dist/av-min.js"></script>
<script src='//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'></script>-->
<div id="vcomments"></div>
<script>
      var notify = <%= theme.valine.notify %> == true ? true : false;
      var verify = <%= theme.valine.verify %> == true ? true : false;
      var visitor = <%= theme.valine.visitor %> == true ? true : false;
  new Valine({
    el: '#vcomments',
              notify: notify,
              verify: verify,
      app_id: '<%= theme.valine.app_id %>',
    app_key: '<%= theme.valine.app_key %>',
          lang: 'en',
          placeholder: '<%= theme.valine.placeholder %>',
          avatar: '<%= theme.valine.avatar %>',
          pageSize: <%= theme.valine.pageSize %>,
          visitor: visitor
      });
</script>
<% }%>

添加完最终长这样：

image-20200911172630511

添加站内搜索以及RSS

1
$ npm install hexo-generator-search hexo-generator-feed --save

在主题配置文件中添加

1
2
3
4
5
nav:
  other code
  RSS: /atom.xml
  search: /search/
rss: /atom.xml

在根配置中添加

1
2
3
4
5
6
7
plugin:
  - hexo-generator-feed
  #Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

image-20200911172630511

添加PWA支持

1
$ npm install --save hexo-pwa

在根配置中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
pwa:
  manifest:
    path: /manifest.json # PWA配置文件
    body:
      name: 辰总的blog
      short_name: 辰总的blog
      icons:
        - src: /assets/avatar.jpeg # 头像地址
          sizes: 192x192
          type: image/png
        - src: /assets/avatar.jpeg
          sizes: 512x512
          type: image/png
      start_url: /index.html # 启动页面
      theme_color: "#000000"
      background_color: "#000000" # 添加到本地后背景颜色
      display: standalone
  serviceWorker:
    path: /sw.js # serviceWorker地址
    preload:
      urls:
        - /
      posts: 5
    opts:
      networkTimeoutSeconds: 5
    routes:
      - pattern: !!js/regexp /hm.baidu.com/
        strategy: networkOnly
      - pattern: !!js/regexp /.*\.(js|css|jpg|jpeg|png|gif)$/
        strategy: cacheFirst
      - pattern: !!js/regexp /\//
        strategy: networkFirst
  priority: 5

最终展现为
image-20200911172630511

部署

guthub page

在根配置中修改部署地址信息

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: "git"
  repo: "https://github.com/YOMXXX/YOMXXX.github.io"
  branch: master
1
$ npm run clean && npm run build && npm run deploy

稍等几分钟，我们可以看到部署成功了

image-20200911172630511

然后直接访问线上地址：https://github.com/YOMXXX/YOMXXX.github.io

腾讯云 Serverless Framework（https://console.cloud.tencent.com/sls）

Serverless Framework 是业界非常受欢迎的无服务器应用框架，开发者无需关心底层资源即可部署完整可用的 Serverless 应用架构。Serverless Framework 具有资源编排、自动伸缩、事件驱动等能力，覆盖编码、调试、测试、部署等全生命周期，帮助开发者通过联动云资源，迅速构建 Serverless 应用。

文档地址

首先开通服务，然后创建一个项目=>选择快速部署一个 Vue 项目；

image-20200911172630511

1
2
3
4
5
6
# 安装
$ npm install -g serverless
$ serverless init vue-starter --name my-vue.js-app
# 部署
$ cd my-vue.js-app && serverless deploy

创建完成后把项目中的这两个文件粘贴到博客项目的根目录中

image-20200911172630511

serverless.yml 是部署到腾讯云的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
name: Blog
component: website
org: "Tencent Cloud, Inc."
author: "辰总"
description: 个人博客，技术文章，生活随笔，记录优秀的文章
keywords: "个人博客，技术文章，生活随笔，记录优秀的文章"
repo: "https://github.com/serverless-components/tencent-vue-starter"
readme: "https://github.com/serverless-components/tencent-vue-starter/master/README.md"
license: MIT
stage: pro # (可选) 用于区分环境信息，默认值是 dev
inputs:
  src:
    src: ./ # 打包的根路径
    hook: sudo npm run clean && sudo npm run build && sudo npm run deploy # 打包前执行的钩子script
    dist: ./public # 打包的目录
src:
  src: ./
  exclude:
    - .env
    - .git/**
    - "**/node_modules"
    - "**/package-lock.json"
app: 辰总的Blog

然后执行 serverless deploy 稍等几分钟我们可以看到上传成功了

image-20200911172630511