基于Hexo搭建个人博客

x33g5p2x  于2021-08-23 转载在 Java  
字(2.3k)|赞(0)|评价(0)|浏览(207)

一 前言

不知道你们有没有这种感觉,使用一些网上博客写文章会嫌弃广告太多,很影响阅读体验,于是有了个人博客的诞生;知识追寻者抽空 写了篇使用GitHub Pages 服务搭建个人博客,当然个人博客也有许多缺点,毕竟不是自己的开发,只能套用别人主题模板,难免功能上有些缺陷,人生不如意之事,十有八九,搭建个人博客也是如此;

知识追寻者搭建的个人博客如下,体验地址如下:

https://zszxz.github.io/

有这方面兴趣的读者可以参考本篇文章进行搭建

二准备工作

  • 需要一个 GitHub 账号;
  • 需要安装 node.jsnpm,并了解相关基础知识;
  • 需要安装git for windows(或者其它 git 客户端);

github 注册地址: https://github.com/

Node官网: https://nodejs.org/en/download/ (10版本以上)

安装完在cmd窗口执行 如下命令 显示版本号说明安装成功;

node -v

git官网: https://git-scm.com/

填写用户名 邮箱

$ git config --global user.name "user_name" # user_name填入GitHub用户名
$ git config --global user.email "user_email" # user_email填入GitHub注册的邮箱

查看已经配置的用户名邮箱

$ git config user.name
$ git config user.email

github 配置 ssh key 自行搜索配置,否则后文仓库无法发布

三安装 hexo

Hexo 是一个简单、快速、强大的基于 Github Pages 的博客框架,支持 Markdown 格式,有众多优秀插件和主题,详细 参考官网: https://github.com/hexojs/hexo

创建 myBlog 目录,比如知识追寻者的创建目录如下

C:\mydata\book\myBlog

在myBlog目录中 打开 git Bash 执行如下命令,安装 hexo

npm install hexo-cli -g

接着 执行如下命令,实际上是从 github拉去 hexo代码

 hexo init 

拉去完后目录内容如下

  • themes 目录存放博客的主题信息;
  • source目录存放文章
  • _config.yml 存放hexo的配置文件

接下来 执行 如下一组命令。安装 npm依赖和编译静态文件

npm install
hexo g

执行完成后 文件夹中多出 public 目录 用于存放静态文件

接着执行本地预览命令

 hexo s

浏览器打开 http://localhost:4000/ 出现如下界面表示本地搭建成功;

四基本配置

由于 默认hexo 的静态页面比较丑,所以我们需自定义主题;

在source/_post 目录下有个hello-word.md文件,替换为我们自己的hello-word.md文章

然后 使用 如下命令创建博客文章

hexo new "文件名"

你就可以在里面随意书写内容

之后执行如下一组命令进行缓存清除,重新生成本地预览,运行

hexo clean
hexo g
hexo s

重新运行后的网站首页如下

打开 _config.yml 文件 修改 标题和 作者重新启动

打开网址发现界面是真的丑

打开 官方主题 网址 https://hexo.io/themes/ 挑选自己喜欢的主题,点击进入主题 github地址,复制代码地址

使用如下命令下载主题到thems目录下

git clone https://github.com/justpsvm/hexo-theme-primer.git themes/primer

找到 _config.yml 末尾 如下位置,替换 thems目录下载的主题名称

再次执行三组命令

hexo clean
hexo g
hexo s

然后在github创建一个仓库,名称格式为; “用户名”.github.io

安装部署插件

$ npm install hexo-deployer-git --save # 安装部署插件

修改部署配置

然后 执行如下一组命令

hexo clean
hexo g
hexo s
hexo d

每次 修改完都需要执行如上命令重新发布;

浏览器输出 https://zszxz.github.io/ 显示如下说明搭建成功;

五hexo 命令

常见命令

  1. hexo new “postName” # 新建文章
  2. hexo clean # 清除缓存
  3. hexo generate # 生成静态页面至 public 目录
  4. hexo server # 开启预览访问端口(默认端口 4000,’ctrl + c’关闭 server)
  5. hexo deploy # 部署到 GitHub
  6. hexo help # 查看帮助
  7. hexo version # 查看 Hexo 的版本

缩写

  1. hexo n == hexo new
  2. hexo g == hexo generate
  3. hexo s == hexo server
  4. hexo d == hexo deploy

组合命令

  1. hexo s -g # 生成并本地预览
  2. hexo d -g # 生成并上传

六后续迁移

如果换电脑了,hexo的迁移也不困难,将 myblog 内容 存储至github,从另一台电脑拉取,内容如下

_config.yml
package.json
.gitignore
scaffolds/
source/
themes/

之后安装hexo环境

npm install -g hexo

安装依赖

npm install
将文章部署到github上的模块
npm install hexo-deployer-git --save
安装RSS插件
npm install hexo-generator-feed --save
添加Sitemap,加速网页收录速度
npm install hexo-generator-sitemap --save

检查

hexo g
hexo s

最后如果写的不错,大家可以关注下我公众号:知识追寻者

相关文章

微信公众号

最新文章

更多