安装Hexo博客教程
前言
一、准备GIthub仓库
二、本地安装git
三、本地安装node.js
四、本地安装Hexo
五、搭建博客
六、部署到Github
前言
去年就有在 Github 搭建博客的想法,但是因为工作太忙搁置了,昨天想起来这事儿,于是网上各种查阅资料,感觉虽然搭建方式比较多,但都不是很全,走了很多弯路,折腾了我一天,才终于搭建好了自己的 GIthub 博客,在此记录梳理一下,希望可以帮到大家,欢迎交流!
博客采用的是Hexo框架(因为支持Markdown语法),使用的是Butterfly主题,搭建过程中的参考链接如下:
Hexo 官方文档:https://hexo.io/zh-cn/docs/
Hexo 官方主题:https://hexo.io/themes/
Butterfly 主题 GIthub:https://github.com/jerryc127/hexo-theme-butterfly
Butterfly 主题doc(主要包含主题配置及一些自定义):https://butterfly.js.org/archives/
最终效果:https://wuqiuxu.github.io
一、准备GIthub仓库
首先你需要在 Github 有一个自己的账号
进入个人主页可以看到Repositories,点击进入仓库
新建一个 Github 仓库,仓库名称填写github用户名.github.io(ps:因为我已经搭建过了,所以下图会出现仓库已存在的警告)
点击最下方的Create repository提交仓库
仓库生成后,复制自己的仓库地址,后续部署的时候需要(如果仓库里面没有文件,进入之后就是图一的样子,否则是图二,红框里就是地址)
二、本地安装git
Mac 系统:brew install git
其他系统可参考官网:https://git-scm.com/downloads
三、本地安装node.js
安装 nvm
Mac系统:brew install nvm
其他系统可参考官网:https://nodejs.org/zh-cn/download
配置环境变量:vim /.zshrc/.nvm
export NVM_DIR=
source $(brew –prefix nvm)/nvm.sh
生效环境变量:source ~/.zshrc
查看 node.js 的可用版本:nvm ls-remote
安装 node.js(版本需不低于 10.13,官方建议使用 Node.js 12.0 及以上版本):nvm install v16.20.0
使用指定版本:nvm use v16.20.0
指定每次启动终端所使用的版本:nvm alias default v16.20.0
四、本地安装Hexo
安装 Hexo:npm install -g hexo-cli(这里提示可以更新npm版本,可以更新一下:npm install -g npm@9.7.1)
五、搭建博客
准备一个文件夹:mkdir blog
初始化:hexo init blog
进入文件夹:cd blog
安装:npm install
查看生成的文件:ls
克隆 butterfly 主题仓库:git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git
themes/butterfly,然后在 themes 下就会多一个主题目录
修改blog目录下的 _config.yml(注意不是主题目录下的_config.yml),把 theme 的值改为 butterfly
配置主题,可以参考这篇文章:https://butterfly.js.org/posts/4aa8abbe/(这一步可以先跳过,等搭建好之后再修改)
生成文章:hexo new post “文章标题”,然后就可以在 blog/source/_posts 下生成的md文件编写了(这一步也可以先跳过,等搭建好之后再来写)
生成静态文件 public(每次修改主题配置后都需要重新生成):hexo generate,缩写hexo g
启动本地服务器:hexo server,缩写hexo s(访问地址为:http://localhost:4000/,可以在本地查看页面,ctrl + c可以结束服务)
清除缓存文件 db.json 和已生成的静态文件 public :hexo clean,缩写hexo cl
有时候对站点的更改不生效,可能需要先运行该命令再重新生成文件
六、部署到Github
修改blog目录下的 _config.yml(注意不是主题下的_config.yml)
a. type 类型配置为 git
b. repo 那里配置为自己的Github仓库地址
按照yml文件格式要求,:后面必须留有一个空格
安装一键部署插件:npm install hexo-deployer-git –save
一键部署到Github:hexo deploy ,缩写hexo d
PS:
更新butterfly主题后报错extends includes/layout.pug block content(网上方法没解决的可以来看看)
百度出来的解决方法都是一样的
1 | npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive |
就很隔路,别人都解决了就我没解决,甚至错误都没有变,一点反馈都没有 = _ =
化悲愤为食欲,吃了顿饭,心情好了,回来 重新看了一遍终端输出信息,果然发现一些可以操作的细节
作为一名合格的LSP 码农,之前本能地无视风险继续安装了
反正也没有什么办法了,fix一下试试吧
1 | npm aduit fix |
接下来就是常规的清除缓存,生成文件,“开机”
1 | hexo clean |