搭建一个自己的博客

Posted on 2022-01-04 Edited on 2022-08-09 Views: Symbols count in article: 6.2k Reading time ≈ 6 mins.

Hexo 快速搭建

环境准备

git
node
npm

命令行里验证有无安装成功

$ git --version
git version 2.24.0.windows.1

$ node --version
v14.17.5

$ npm --version
6.14.14

配置SSH Key

如果第一次用git工具，记得配置一下SSH key，为部署本地博客到 Github 做准备。

如果之前没有创建，则执行以下命令全局配置一下本地账户：

1 2	git config --global user.name "用户名" git config --global user.email "邮箱地址"

生成密钥SSK key

1	ssh-keygen -t rsa -C '上面的邮箱'

回车回车回车，即可生成ssh key。.ssh目录下有两个文件，id_rsa和id_rsa.pub，这两个就是ssh key的密钥对，前一个是私钥，后一个是公钥

cat获取你的ssh

1	cat ~/.ssh/id_rsa.pub

复制输出内容

登录github，settings -> SSH and GPG keys -> New SSH key

Title随便写

Key把刚才复制的内容copy到这，就确认完成了。

安装Hexo

执行命令

1	$ npm install -g hexo-cli # -g 代表着全局安装

完成后建立自己的个人博客

1
2
3

$ hexo init blogName
$ cd blogName
$ npm install

创建你的第一篇博文

新建一篇博文：

1	$ hexo new '新年快乐'

在 /source/_posts文件夹下找到你的博文，使用typora（推荐）打开并编辑。

保存后运行：

1 2	$ hexo generate # 生成静态文件，可简写为 hexo g $ hexo server # 启动服务器。默认情况下，访问网址为：http://localhost:4000/。可以简写为 hexo s

此时已经可以在public文件夹下看到完整的静态文件。
在浏览器中输入http://localhost:4000/就可以看到预览效果了。

以上是本地部署，下面讲博客部署到Github page上

部署到Github page

登录github，新建仓库，仓库名为username.github.io，注意：username应该是你github的用户名

本地和github都完成之后，现在需要把这两者连接在一起

修改配置

在项目根目录下的_config.yml修改配置参数

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo:
    github: https://github.com/你的用户名/你的用户名.github.io.git
  branch: master

安装部署插件
1
npm install hexo-deployer-git --save
hexo-deploy-git 插件是通过拷贝 public 文件夹内容到.deploy_git文件夹下，然后提交推送到远程分支上实现了网站文件的部署。
启动执行
1
hexo g -d

用浏览器输入，https://你的用户名.github.io，就可以看到你的博客了。

配置主题

个人用的是NexT主题

进入项目根目录，下载NexT主题

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

修改项目根目录下的_config.yml的配置

1 2	## Themes: https://hexo.io/themes/ theme: next

注意：_config.yml配置文件有两个，一个在项目根目录，一个在主题目录/themes/next中。

NexT配置

以下均在/themes/next文件夹中的_config.yml文件中修改

修改NexT风格

NexT主题有四个风格，想要的取消注释

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

暗黑模式

1 2	# Dark Mode darkmode: true

改变网页标签icon

把你想要用的图片放在/themes/next/source/images中

1
2
3

favicon:
  small: /images/favicon-16x16-next.ico
  medium: /images/favicon-32x32-next.ico

插一个提示，可以在比特虫在线制作icon

增加或删除博客页面功能

想用的取消注释，

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加标签页面

在项目根目录

1 2	hexo new page tags cd ./source/tags

打开index.md文件，增加一个type字段

---
title: tags
type: "tags"
comments: false
date: 2022-01-04 13:29:07
---

添加分类页面

在项目根目录

1 2	hexo new page categories cd ./source/categories

打开index.md文件，增加一个type字段

---
title: categories
type: "categories"
date: 2022-01-04 13:55:58
---

添加about页面

在项目根目录

1 2	hexo new page tags cd ./source/about

打开index.md文件，里面直接写你的个人介绍。

调整侧边栏位置

sidebar:
  # Sidebar Position.
  #position: left
  position: right

添加侧边栏头像图片

# Sidebar Avatar
avatar:
  # 把要展示的图片放在images中
  url: /images/avatar.jpg
  # If true, the avatar will be displayed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

启用不蒜子统计

不蒜子是用于统计文章添加阅读次数

busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

添加加载进度条

1 2	cd themes/next git clone https://github.com/theme-next/theme-next-pace source/lib/pace

修改配置文件 themes/next/_config.yml

1
2
3

pace:
  enable: true
  theme: minimal

添加页面顶部阅读进度条

1 2	cd themes/next git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

修改配置文件 themes/next/_config.yml

reading_progress:
  enable: true
  position: top               # 进度条的位置：top | bottom
  color: "#37c6c0"            # 进度条的颜色
  height: 3px                 # 进度条的大小

显示侧栏阅读进度百分比

修改配置文件 themes/next/_config.yml

back2top:
  enable: true
  sidebar: false
  scrollpercent: true

字数与阅读时长统计插件

1
2
3

cd 项目根目录
npm install eslint --save
npm install hexo-symbols-count-time --save

修改配置文件 themes/next/_config.yml

symbols_count_time:
  time: true                   # 文章阅读时长
  symbols: true                # 文章字数统计
  total_time: true             # 站点总阅读时长
  total_symbols: true          # 站点总字数统计
  exclude_codeblock: true      # 排除代码字数统计

添加搜索功能

进入项目根目录，下载插件hexo-generator-searchdb

1	npm install hexo-generator-searchdb --save

修改主题配置文件，添加search，并修改local_search中的enable，改为true

search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  
# Local search
local_search:
  enable: true

首页博文只展示部分文字

在文章想要分割的位置中添加一行

markdown上使用图片，网页上能正常显示

修改根目录下的_config.yml文件，把post_asset_folder字段改为true
- 改为之后，新建文章时hexo new 文章标题，_posts不仅会出现md文件，而且会出现一个同名的文件夹，之后这个文件夹放你要引用的图片
修改typora设置
- 以后拖拽图片进文章内之后，图片会自动添加到同名文件夹下面
下载插件npm install hexo-asset-image --save

根据网上的信息，这时候就hexo clean && hexo g && hexo s，按道理就能看到图片了，但结果我的就是不行，图片路径出现了/.io//*******.png，就前面会多出/.io//这个前缀，导致图片不能显示。

解决方法

修改一下项目根目录/node_modules/hexo-asset-image/index.js的24行左右，把 link.lastIndexOf('.') 修改为 link.lastIndexOf('/')就可以了。

备份数据

修改.gitignore文件，添加package-lock.json 到忽略清单中
创建 themes_custom/next 文件夹，将对主题进行的配件修改的文件拷贝一份到这里
- 例如_config.yml文件和source文件中的imag

执行以下命令，在本地创建备份仓库

 cd blog
$ git init
已初始化空的 Git 仓库于 blog/.git/

$ git submodule add https://github.com/theme-next/hexo-theme-next.git themes/next
添加位于 'themes/next' 的现存仓库到索引

$ git add .
$ git commit -m "init blog backup"

将备份内容 push 到远程仓库的备份分支 hexo 上：

1
2
3

 git branch -m master hexo
$ git remote add origin https://github.com/Mupceet/mupceet.github.io.git
$ git push -u origin hexo:hexo

恢复数据

新电脑同样需要配置hexo环境

node
npm
git

配置git

git config --global user.name "用户名"
git config --global user.email "邮箱地址"

配置ssh key

开头有写

恢复

克隆备份内容
- git clone --recursive -b hexo https://github.com/yepwaibin/yepwaibin.github.io.git blog
下载npm依赖模块
- cd blog
- npm install
恢复主题配置
- 将 themes_custom 文件夹中对主题的配置的修改恢复到对应的主题文件夹中，这里建议使用对比的方式对其进行修改，而不是直接覆盖，这样就完成了主题的配置。
克隆原博客内容
- cd blog
- git clone https://github.com/yepwaibin/yepwaibin.github.io.git .deploy_git

就完成恢复了，之后正常写作。

参考链接

隐藏博文

有时候一些非技术类的博文不想在博客上直接展示，我们可以使用一些技巧，将博文隐藏，只能通过url输入跳转。

安装插件

   npm install hexo-hide-posts --save

2. 在`_config.yml`文件中修改配置，添加下列配置
   ```bash
   # hexo-hide-posts
   hide_posts:
     enable: true
     # hidden可以改成其他你喜欢的名字
     filter: hidden
     # 指定你想要传递隐藏文章的 generator，比如让所有隐藏文章在存档页面可见
     # 常见的 generators 有：index, tag, category, archive, sitemap, feed, etc.
     public_generators: []
     # 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
     noindex: true

在需要的隐藏的博文中，在文章的 front-matter 中添加 hidden: true 即可隐藏文章
需要访问隐藏的博文时，直接在url上输入完整链接，即可展示文章。

参考链接

Hexo命令

hexo init [folder]
- Hexo 默认在目前的文件夹建立网站。
- Git clone hexo-starter 和 hexo-theme-landscape 主题到当前目录或指定目录。
- 使用 Yarn 1、pnpm 或 npm 包管理器下载依赖（如有已安装多个，则列在前面的优先）。npm 默认随 Node.js 安装。
hexo new '文章标题'
- 新建文件，写的时候自己用typora打开写
hexo clean
- 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
- 在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。
hexo generate
- 生成静态文件，可简写为hexo g
hexo server
- 启动服务器。默认情况下，访问网址为：http://localhost:4000/。可以简写为 hexo s
hexo deploy
- 部署网站，可简写为hexo d