详细记录一次Hexo搭建个人网站的过程,边学边记,完善中。
说明
- 网站使用Hexo框架搭建,上手快、简单
- 网站部署在Nginx上
- 由于本人客户使用的是黑苹果,因此教程全程使用macOS10.13环境,建议使用Homebrew来安装软件
- 服务端使用CentOS7
- 建议前往Hexo官网了解更多内容及教程
环境
- 客户端:MacOS | Windows | Linux
- 服务端:CentOS7 + Nginx + Hexo
搭建过程
安装Git
- 使用命令安装Git,或者下载安装包进行安装
yum install git-core
- 通过查看版本号来验证是否安装了Git
git –version
安装Node
- Mac
brew install node
- Linux
- 前往官网https://nodejs.org/en/download/下载压缩包
- 拷贝到:/usr/local/下
- 解压:
tar xvf node- v12.13.1-linux-x64.tar.xz
- 重命名:
mv node-v12.13.1-linux-x64 node
- 创建软连接:
ln -s /usr/local/node/bin/node /usr/local/bin/node
ln -s /usr/local /node/bin/npm /usr/local/bin/npm
- 将/usr/local/bin加入到环境变量
安装Hexo
- 有了Git和Node就可以安装Hexo了,安装命令:
npm install -g hexo-cli
- 初始化Hexo项目
hexo init <名称>
- 切换到该目录中
cd <名称>
- 安装
npm install
- 安装完成之后会出现相应的文件,详情见Hexo官网
- 至此创建完Hexo项目,随后可以开始定制啦
安装Nginx
- 安装:
yum -y install nginx
- 自启:
systemctl enable nginx
- 启动:
service nginx start
- 修改nginx.conf中的默认路径
主题及插件
NexT主题
Github:https://github.com/theme-next/hexo-theme-next
建议将NexT fork到自己的仓库,然后再通过Submodule的方式加入的网站的项目中(记得网站项目和主题项目分开提交)
作者Github上写的教程比较详细,本人懒,就不写了
文章显示修改时间
修改配置文件_config.yml
post_meta.updated_at.enable: true
Live2d插件
Github:https://github.com/EYHN/hexo-helper-live2d
Gitalk评论插件
参考:
看远方的星 - Hexo评论功能的实现:Gitalk
Sitemap站点地图
1 | npm install hexo-generator-sitemap |
2 | npm install hexo-generator-baidu-sitemap |
站内搜索
1 | npm install hexo-generator-searchdb |
图片懒加载
1 | npm install hexo-lazyload-image --save |
站点配置文件加入:
1 |
|
2 | lazyload: |
3 | enable: true |
4 |
|
5 | onlypost: false |
6 | loadingImg: /images/xxx.png |
文章加入图片
1 | npm install hexo-asset-image --save |
修改_config.yml
配置post_asset_folder: true
文章中引用:[标题](图片文件.jpg)