基于Hexo搭建个人博客

知识追寻者 2020-11-13 11:58:50
搭建 博客 个人 hexo


一 前言

不知道你们有没有这种感觉,使用一些网上博客写文章会嫌弃广告太多,很影响阅读体验,于是有了个人博客的诞生;知识追寻者抽空 写了篇使用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

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

版权声明
本文为[知识追寻者]所创,转载请带上原文链接,感谢
https://blog.csdn.net/youku1327/article/details/109551012

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple