使用 HEXO + Github 自建博客
使用 HEXO + Github 自建博客
搭建环境准备
- 安装 node.js
- 安装 git
- gitHub 账户配置
Hexo 使用
- 安装Hexo
在合适的地方创建一个新的文件夹. 例如, 我的电脑为 mac, 以 ~/Des
npm install hexo-cli -g
npm install hexo --save
输入 hexo -v 查看以下是否安装成功
-
配置Hexo
初始化
hexo init npm install // 之后npm将会自动安装你需要的组件，只需要等待npm操作即可。体验HEXO
hexo g hexo s # hexo server -p 端口号 # 使用指定的端口号 -
将Hexo与github page 联系起来
打开_config.yml 文件，配置 Deploy 属性
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: git@github.com:chinaofmelon/chinaofmelon.github.io.git branch: masterrepository 填写的是 github 上的项目地址
-
安装部署扩展
npm install hexo-deployer-git --save -
发布文章
hexo d -g
添加插件
例如添加sitemap和feed插件
进入 hexo 根目录
npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save
修改 _config.yml 文件
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml
执行 hexo d -g, 访问 https://gdutxiaoxu.github.io/atom.xml 和 https://gdutxiaoxu.github.io/sitemap.xml ，发现这两个文件已经成功生成了。
404 页面添加
GitHub Pages 有提供制作404页面的指引：Custom 404 Pages
直接在根目录下创建自己的404.html或者404.md就可以。
注意: 自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。
推荐使用腾讯公益404
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
</head>
<body>
<script type="text/javascript" src="https://www.qq.com404/search_children.js" charset="utf-8" homePageUrl="xxx.github.io" homePageName="回到我的主页">
</script>
</body>
</html>
多电脑实使用 Hexo
创建两个仓库(分支)，分别管理 hexo 生成的博客与 hexo 本身的代码。
实现步骤
-
创建仓库
-
拷贝 hexo 仓库到本地
-
通过Git bash依次执行
npm install hexo hexo init npm install npm install hexo-deployer-git -
修改 _config.yml 中的deploy 参数
-
正常 push 代码到 github 上
-
执行
hexo g -d生成网站代码并部署到 github 上.
关于日常改动流程
先在本地对博客进行修改，然后先 push hexo 本身的代码，然后再生成博文部署到 master 分支上。这种操作保险。如果顺序调换的话，可能会出现网页数据部署不准确的问题。
其他电脑搭建 hexo 环境修改
-
clone hexo 分支
-
在分支下执行
npm install hexo npm install npm install hexo-deployer-git
**注意: 不需要hexo init这条指令 **
Hexo 主题配置
-
该主题使用了 less 编译，Hexo 默认的编译器为 hexo-renderer-stylus 要切换为 hexo-renderer-less
npm install hexo-renderer-less --save # npm uninstall hexo-renderer-stylus --save # 卸载 hexo-renderer-stylus，如果你不需要的话 hexo clean hexo server刷新页面查看新主题效果，Concise 主题的具体配置到 这里。
-
jsimple 仿简书主题
使用参考这里
-
使用参考这里
Hexo 使用快速入门
欢迎使用 Hexo! 您可以从 文档 获取更多的关于 Hexo 的信息. 使用过程中如果有问题可以到 问题解答 或者GitHub 上提问.
快速入门
新建一篇文章
$ hexo new "My New Post"
详情: Writing
启动服务
$ hexo server
详情: Server
生成静态网页
$ hexo generate
详情: Generating
部署网站
$ hexo deploy
详情: Deployment
