个人博客搭建指南

前言

本站使用的是hexo框架,然后主题是由大佬xaoxuu制作的开源主题.我在项目基础上进行了一些客制化和一些额外功能的拓展,包括加入了我个人比较喜欢的打卡墙功能(打卡仙人这一块).后续有时间会写一篇打卡墙的制作教程(todo).

环境配置

环境配置:

1 2	node -v #查看node版本 npm -v #查看npm版本

可以使用nvm来管理node版本

安装 hexo:

1	npm install hexo-cli -g

出现权限问题 ,修改:

1	sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} #修改权限范围

初始化个人博客文件夹:

1
2
3

hexo init /Users/mac/Blog/JakicDong.github.io  # 博客初始化，这里是创建的本地博客文件夹，执行后会自动创建，我这里图简洁，直接用了我网站的地址 hihulu.github.io 为文件名
cd /Users/mac/Blog/JakicDong.github.io  # 进入本地的博客文件夹
hexo server # 打开本地服务器预览

/Users/mac/JakicDong.github.io

Github部署

为了部署到Github上，需要安装hexo-deployer-git插件，命令如下：

1	sudo npm install hexo-deployer-git --save

然后找到自己的本地博客文件夹，修改博客根目录下的_config.yml文件中的deploy，修改成：

deploy:
  type: git
  repo: git@github.com:JakicDong/JakicDong.github.io.git #这个地址是从github仓库复制过来的ssh
  branch: main

（⚠️注意，这里有一个很容易犯错的点，我们在创建“hihulu.github.io”这个仓库的时候，一定要创建和你github用户名相同的仓库，后面加. http://github.io ，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是 http://xxxx.github.io ，其中xxx就是你注册GitHub的用户名。所以上图我的仓库显示的是“hihulu/hihulu.github.io”，如果仓库名和用户名不一致，后面是根本打不开这个网站的～）

然后就可以通过以下命令行上传github了

1 2	hexo g #hexo generate的简写，即把刚刚做的改动生成更新一下 hexo d #hexo deploy，上传到github网站

还有一些常用的命令行：

1 2	hexo clean #清空一下缓存，有时候博客页面显示不正常也可以试试这个命令行 hexo server # 在本地服务器运行，网址默认https://localhost:4000

更改主题

很多前端大牛博主设计了很多好看的主题，网址https://hexo.io/themes/ ，可以预览并选择你喜爱的主题进行应用。

这里浅以一个蛮火的主题butterfly主题来走一个安装主题的步骤～

执行以下代码：

1	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

运行成功之后，在项目文件夹根目录中可以查看到新的主题themes文件夹：butterfly

在博客的项目文件夹下，修改_config.yml 配置文件如下:

1 2	# theme: landscape 默认主题 theme: butterfly

此时主题还不能正常配置使用，需要安装pug 以及stylus 的渲染器：

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

最后推送到github

# 清除缓存b.json 和已生成的静态文件 public
hexo clean
# 生成静态页面到默认设置的 public 文件夹
hexo g
# 部署到设定的仓库或上传部署至服务端
hexo d

至此主题安装end，可访问https://hihulu.github.io/ 查看～

https://JakicDong.github.io/

常用命令

hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。