搭建个人博客

这几天，通过从网上寻找各种搭建教程，不断尝试，再删除，再尝试，我终于战战兢兢的搭建了自己简陋的博客系统，这里放上网址，欢迎大家的访问哦

https://cat711.github.io/

环境与工作准备

需要安装的程序（相信大家都有）

Node
- 下载地址：https://nodejs.org/en/download/
- 打开CMD窗口，运行如下命令,修改npm源
  1
  npm config set registry https://registry.npm.taobao.org
Git
Hexo
- 新建一个文件夹，在git bash执行命令安装hexo
  1
  npm install -g hexo-cli
- 安装完后输入hexo -v验证是否安装成功，若出现版本号则表明安装成功
github配置
- 点击右上角的+按钮，选择New repository,创建一个<用户名>.github.io的仓库,选项同之前创建仓库相同
- 在git bash窗口ssh-keygen -t rsa -C "你的邮箱"在C盘的用户文件夹下的.ssh文件夹，会看到id_rsa.pub
- 将公钥复制到github
  - 进入github，点击右上角头像选择settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥填到Key那一栏
  - 测试连接，输入以下命令
    1
    ssh -T git@github.com
    出现连接到账户的信息，此时完成了环境准备工作

初始化Hexo项目

在新建的文件夹的git bash下执行hexo init blog-demo(项目名)命令，进行hexo init初始化项目
进入blog-demo ，输入npm i安装相关依赖
1
2
cd blog-demo //进入blog-demo文件夹
npm i
1. 项目初始化后，博客的框架已经在文件夹中了
2. 输入hexo server或hexo s启动项目
3. 打开浏览器，输入地址http://localhost:4000/ 看到以下效果，说明博客已经初步搭建成功

将静态博客挂载到github page

安装hexo-deployer-git

1	npm install hexo-deployer-git --save

修改_config.yml文件

在blog-demo目录下的_config.yml，修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进）

deploy:
  type: git
  repository: git@github.com:Fomalhaut-Blog/Fomalhaut-Blog.github.io.git
  branch: main

修改好配置后。运行如下命令，将代码部署到github

1 2	hexo clean && hexo generate && hexo deploy // Git BASH终端 hexo clean; hexo generate; hexo deploy // VSCODE终端

hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。
hexo generate：生成静态文章，可以用hexo g缩写
hexo deploy：部署文章，可以用hexo d缩写

如果出现Deploy done，则说明部署成功了

此时，就可以打开浏览器访问https://<用户名>.github.io，这时就可以看到博客内容了

安装主题

在git bash窗口执行如下命令

1	npm i hexo-theme-butterfly

安装成功之后可以在【C:/Hexo-Blog/blog-demo/node_modules】文件夹下找到hexo-theme-butterfly文件夹

应用主题

修改站点配置文件_config.yml，把主题改为butterfly

1	theme: butterfly

如果你没有pug以及stylus的渲染器，请下载安装，这两个渲染器是Butterfly生成基础页面所需的依赖包

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

把主题文件夹中的 _config.yml 复制到 Hexo 根目录里，同时重新命名为 _config.butterfly.yml。以后只需要在 _config.butterfly.yml进行配置即可生效

基本用法说明

Front-matter

Page Front-matter 用于页面配置

---
title:
date:
updated:
type:
---

写法	解释
title	【必需】页面标题
date	【必需】页面创建日期
type	【必需】标籤、分类和友情链接三个页面需要配置

Post Front-matter 用于文章页配置

---
title:
date:
updated:
tags:
---

写法	解释
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标籤

标签页

打开Git Bash执行如下命令
1
hexo new page tags
在[BlogRoot]\source\会生成一个含有index.md文件的tags文件夹
修改[BlogRoot]\source\tags\index.md，添加type: "tags"

---
title: tags
date: 2022-10-28 12:00:00
type: "tags"
---

网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改站点配置文件_config.yml

参数	描述
title	网站标题
subtitle	描述
description	网站描述
keywords	网站的关键词。支持多个关键词
author	您的名字
language	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone	网站时区。Hexo 默认使用您电脑的时区。请参考时区列表进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai

导航菜单

修改主题配置文件_config.butterfly.yml

menu:
  Home: / || fas fa-home
  Archives: /archives/ || fas fa-archive
  Tags: /tags/ || fas fa-tags
  Categories: /categories/ || fas fa-folder-open
  List||fas fa-list:
    Music: /music/ || fas fa-music
    Movie: /movies/ || fas fa-video
  Link: /link/ || fas fa-link
  About: /about/ || fas fa-heart

必须是 /xxx/，后面||分开，然后写图标名，如果不想显示图标，图标名可不写

文章置顶与封面

你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大，置顶的优先级越大

文章的markdown文档上，在Front-matter添加cover，并填上要显示的图片地址。如果不配置cover，可以设置显示默认的cover；如果不想在首页显示cover，可以设置为false。
修改主题配置文件_config.butterfly.yml

cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover:

头像

1
2
3

avatar:
  img: /assets/head.jpg
  effect: false # true则会一直转圈

网站背景

修改主题配置文件_config.butterfly.yml

# 图片格式 url(http://xxxxxx.com/xxx.jpg)
# 颜色（HEX值/RGB值/颜色单词/渐变色)
# 留空 不显示背景
background: url(https://source.fomal.cc/img/dm1.webp)

副标题设置

可设置主页中显示的网站副标题或者喜欢的座右铭。

修改主题配置文件_config.butterfly.yml中的subtitle

# the subtitle on homepage (主頁subtitle)
subtitle:
  enable: true
  # Typewriter Effect (打字效果)
  effect: true
  # loop (循環打字)
  loop: true
  # source 調用第三方服務
  # source: false 關閉調用
  # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
  # source: 2  調用一句網（簡體） http://yijuzhan.com/
  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
  # subtitle 會先顯示 source , 再顯示 sub 的內容
  source: false
  # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
  sub:
    - "Welcome to ..."
    - "Hope you have a nice day"

一些问题的解决

1.端口问题

多次调试hexo时可能会多次开关端口，可能会出现端口以被占用的问题

此时，先用管理员身份打开命令窗口

1	netstat -o -n -a \| findstr :4000

查看4000端口的详细情况

将4000端口的进程结束掉

使用如下命令

1	taskkill /F /PID 3628

这样就可以结束掉端口，然后重新接入端口

2.依赖包问题

git bash命令如果执行不理想的话。可以在终端运行，也可以在vscode上的终端运行，更快捷

环境与工作准备

初始化Hexo项目

将静态博客挂载到github page

安装主题

应用主题

基本用法说明

Front-matter

标签页

网站资料

导航菜单

文章置顶与封面

头像

网站背景

副标题设置

一些问题的解决

1.端口问题

2.依赖包问题