搭建个人博客
这几天,通过从网上寻找各种搭建教程,不断尝试,再删除,再尝试,我终于战战兢兢的搭建了自己简陋的博客系统,这里放上网址,欢迎大家的访问哦
环境与工作准备
需要安装的程序(相信大家都有)
Node
打开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
2cd blog-demo //进入blog-demo文件夹
npm i- 项目初始化后,博客的框架已经在文件夹中了
- 输入hexo server或hexo s启动项目
- 打开浏览器,输入地址http://localhost:4000/ 看到以下效果,说明博客已经初步搭建成功
将静态博客挂载到github page
- 安装hexo-deployer-git
1 | npm install hexo-deployer-git --save |
- 修改_config.yml文件
在blog-demo目录下的_config.yml,修改最后一行的配置,将repository修改为你自己的github项目地址即可,还有分支要改为main
代表主分支(注意缩进)
1 | deploy: |
- 修改好配置后。运行如下命令,将代码部署到github
1 | hexo clean && hexo generate && hexo deploy // Git BASH终端 |
- 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
进行配置即可生效
基本用法说明
- Page Front-matter 用于页面配置
1 | --- |
写法 | 解释 |
---|---|
title | 【必需】页面标题 |
date | 【必需】页面创建日期 |
type | 【必需】标籤、分类和友情链接三个页面需要配置 |
- Post Front-matter 用于文章页配置
1 | --- |
写法 | 解释 |
---|---|
title | 【必需】文章标题 |
date | 【必需】文章创建日期 |
updated | 【可选】文章更新日期 |
tags | 【可选】文章标籤 |
打开
Git Bash
执行如下命令1
hexo new page tags
在
[BlogRoot]\source\
会生成一个含有index.md
文件的tags
文件夹修改
[BlogRoot]\source\tags\index.md
,添加type: "tags"
1 | --- |
修改网站各种资料,例如标题、副标题和邮箱等个人资料,请修改站点配置文件_config.yml
参数 | 描述 |
---|---|
title | 网站标题 |
subtitle | 描述 |
description | 网站描述 |
keywords | 网站的关键词。支持多个关键词 |
author | 您的名字 |
language | 网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans和 zh-CN。 |
timezone | 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai |
修改主题配置文件_config.butterfly.yml
1 | menu: |
必须是 /xxx/
,后面||
分开,然后写图标名,如果不想显示图标,图标名可不写
你可以直接在文章的
front-matter
区域里添加sticky: 1
属性来把这篇文章置顶。数值越大,置顶的优先级越大文章的markdown文档上,在
Front-matter
添加cover
,并填上要显示的图片地址。如果不配置cover
,可以设置显示默认的cover
;如果不想在首页显示cover,可以设置为false
。
修改主题配置文件_config.butterfly.yml
1
2
3
4
5
6
7
8
9
10cover:
# 是否显示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面显示的位置
# 三个值可配置 left , right , both
position: both
# 当没有设置cover时,默认的封面显示
default_cover:
1 | avatar: |
修改主题配置文件_config.butterfly.yml
1 | # 图片格式 url(http://xxxxxx.com/xxx.jpg) |
可设置主页中显示的网站副标题或者喜欢的座右铭。
修改主题配置文件_config.butterfly.yml
中的subtitle
1 | # the subtitle on homepage (主頁subtitle) |
一些问题的解决
1.端口问题
多次调试hexo时可能会多次开关端口,可能会出现端口以被占用的问题
此时,先用管理员身份打开命令窗口
1 | netstat -o -n -a | findstr :4000 |
查看4000端口的详细情况
将4000端口的进程结束掉
使用如下命令
1 | taskkill /F /PID 3628 |
这样就可以结束掉端口,然后重新接入端口
2.依赖包问题
git bash命令如果执行不理想的话。可以在终端运行,也可以在vscode上的终端运行,更快捷