该博文是对整个博客搭建过程的技术总结,重点是Hexo框架的使用.
Hexo
Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
GitHubPages
GitHubPages是一种静态站点托管服务,旨在直接从GitHub存储库托管您的个人,组织或项目页面。
Netlify
Netlify是国外一家提供静态网络托管服务的综合平台,专注于静态网站托管的web服务平台,可以完美的取代Coding。 Netlify完美且免费支持的ssl、域名绑定、http/2和TLS。最重要的就是,管理方式用git方法传递给github、gitlab或者是Bitbucket,然后Netlify就能自动编译并生成静态网站。
参考文档
准备工作
安装node.js
1 | sudo pacman -S nodejs |
安装git
1 | sudo pacman -S git |
安装Hexo
1 | npm install -g hexo-cli |
检查工作
1 | nodejs:node -v |
若你遇到了问题,请参考文档
搭建本地博客
1 | mkdir myblog |
项目初始化
项目初始化,会自动生成博客模板,以后写博客只需用 markdown 语法编写对应的 .md 文件即可
1 | hexo init |
安装所有依赖
1 | yarn install |
启动本地服务
1 | hexo server |
在浏览器输入localhost:4000即可预览博客
关联GitHub
通过 GitHub 的 pages 功能,我们可以把我们的博客托管到 GitHub,而无需去购买云服务器 ,即可构建免费博客。
创建GitHub账户
你可以去GitHub官网按照步骤创建
配置关联GitHub
有了 GitHub 账号之后,登录 GitHub ,创建一个项目,项目名称最好和你本地的项目一致,比如: myblog
- 点击如图 Settings 开启,GitHub Pages 功能
- 选择 master branch , 然后 Save
- 复制你的项目连接,如图
- 然后在你本地项目根目录找到 _config.yml 文件,粘贴到以下位置
1 | Deployment |
完成关联
完成以上步骤之后,就可以把自己本地项目推送到 GitHub 托管
- 安装 hexo-deployer-git 插件(可以通过简单的命令,完成文件生成及推送功能)
1 | yarn add hexo-deployer-git -S |
- 运行 hexo g (生成本地文件)
1 | hexo g |
- 运行 hexo d (将本地文件推送到 GitHub ,和 git push 功能相同)
1 | hexo d |
此时,GitHub 应该已给你生成了访问连接,连接格式是: 你的账号名称 + .github.io + \项目名称,也可以去刚才 GitHubPages 设置页面查看
https 绑定域名
这里采用第三方服务 Netlify 来提供免费的SSL/TLS证书。
新增站点
- 我们需要注册一个 Netlify 账号,可以选择用 GitHub 注册
点击按钮 New site from Git,来新增站点
然后,点击如图按钮 GitHub
选择你的项目,比如我的 MyBlog
点击 Deploy site
- 点击 Site settings
- 点击 Change site name 修改短名称,方便记忆
- 在点击 Domain management 下的 HTTPS ,按照步骤完成操作,稍等片刻,重新登陆博客,即可看到我们的域名已经上锁
更换主题
执行以下命令,安装 next 主题
1 | git clone https://github.com/iissnan/hexo-theme-next.git themes/next |
更改配置文件,修改根目录下的 ./_config.yml 文件,如下
1 | 找到 theme:设置为 |
重新生成文件,推送到GitHub
1 | hexo clean |
也可以运行以下命令,启动一个本地服务,调试确定无问题之后再 推送到 GitHub
1 | hexo s --debug |