搭建个人网站

详细记录一次Hexo搭建个人网站的过程,边学边记,完善中。

说明

  1. 网站使用Hexo框架搭建,上手快、简单
  2. 网站部署在Nginx上
  3. 由于本人客户使用的是黑苹果,因此教程全程使用macOS10.13环境,建议使用Homebrew来安装软件
  4. 服务端使用CentOS7
  5. 建议前往Hexo官网了解更多内容及教程

环境

  1. 客户端:MacOS | Windows | Linux
  2. 服务端:CentOS7 + Nginx + Hexo

搭建过程

安装Git

  1. 使用命令安装Git,或者下载安装包进行安装
    yum install git-core
  2. 通过查看版本号来验证是否安装了Git
    git –version

安装Node

  • Mac
    brew install node
  • Linux
  1. 前往官网https://nodejs.org/en/download/下载压缩包
  2. 拷贝到:/usr/local/下
  3. 解压:
    tar xvf node- v12.13.1-linux-x64.tar.xz
  4. 重命名:
    mv node-v12.13.1-linux-x64 node
  5. 创建软连接:
    ln -s /usr/local/node/bin/node /usr/local/bin/node
    ln -s /usr/local /node/bin/npm /usr/local/bin/npm
  6. 将/usr/local/bin加入到环境变量

安装Hexo

  1. 有了GitNode就可以安装Hexo了,安装命令:npm install -g hexo-cli
  2. 初始化Hexo项目hexo init <名称>
  3. 切换到该目录中cd <名称>
  4. 安装npm install
  5. 安装完成之后会出现相应的文件,详情见Hexo官网
  6. 至此创建完Hexo项目,随后可以开始定制啦

安装Nginx

  1. 安装:yum -y install nginx
  2. 自启:systemctl enable nginx
  3. 启动:service nginx start
  4. 修改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

1
npm install --save hexo-helper-live2d

Gitalk评论插件

1
npm i --save gitalk

参考:
看远方的星 - Hexo评论功能的实现:Gitalk

Sitemap站点地图

1
npm install hexo-generator-sitemap --save
2
npm install hexo-generator-baidu-sitemap --save

站内搜索

1
npm install hexo-generator-searchdb --save

图片懒加载

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)

坚持原创技术分享,您的支持将鼓励我继续创作!