开发者社区> 茶无味的一天> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

GithubPages + Hexo 打造免费个人静态网页博客

简介: 作为程序员为什么要写技术博客,一方面是为了养成做笔记做总结的习惯,一方面也能做些有用的知识分享,提高写作能力,其实有很多不错的博客平台都可以用,比如在掘金发布博客文章,但是如何在不需要域名空间和博客程序下,低成本的拥有属于自己的博客网站呢?
+关注继续查看
前言:作为程序员为什么要写技术博客,一方面是为了养成做笔记做总结的习惯,一方面也能做些有用的知识分享,提高写作能力,其实有很多不错的博客平台都可以用,比如在掘金发布博客文章,但是如何在不需要域名空间和博客程序下,低成本的拥有属于自己的博客网站呢?

我后来发现很多大牛的个人博客都在用hexo,折腾了一下觉得简单又实用,markdown编写git发布,静态网页速度快,稳定性高,对于博客程序来说这一切足够了。听说还可以集成vue、angular等。

1. 准备工作

  • 必要环境及工具的下载:
  1. Node.js 安装后也会安装好 npm 包管理工具。
  2. Git 用于提交代码的工具,mac下安装了xcode则忽略这步。
  3. 需要一个Github账号,使用它提供的 Pages 功能就可以拥有一个静态网站空间,而且是免费的。国内的 Coding 也能做到同样的事,这里我还是选择github作为例子,原理都一样按需选择。
  • 申请个自己的域名(非必须)

2. 安装HEXO博客程序

  • mac下打开终端,如果嫌cd命令找目录麻烦,可以打开finder,点击左上角苹果图标旁边的Finder->服务->服务偏好设置->勾选新建位于文件夹位置的终端窗口,以后便可以在目录文件夹右键选择服务->...位置的终端窗口
  • windows在磁盘随便一个目录空白处右键选择在此处打开GitBash (使用cmd也可以,不推荐)
  • 在终端执行以下命令安装hexo (以下所有命令在windows下都不需要加sudo)

sudo npm install -g hexo

3. 初始化博客

  • 创建一个文件夹用于存放博客资源目录,在该目录下打开终端执行:hexo init
  • 第一次初始化需要稍作等待,完成后再执行:hexo g
  • 该命令作用是构建文章页面,就是生成静态网页,最后执行:hexo s

此时自动启动本地测试服务器,浏览器访问 http://localhost:4000 即可查看初始化好的博客。

初始化博客可能报错:ERROR Plugin load failed: hexo-server
解决方法:执行 sudo npm install hexo-server

4. 部署博客

经过以上步骤,我们已经可以将博客程序跑起来了,非常简单。接下来就要将它与Pages关联。

登录github并创建一个repository,点击“New repository”创建存放博客的仓库,注意仓库名必须为xxx(自定义前缀).github.io,这个也是你博客默认的访问地址。

进入博客资源目录(即刚刚初始化的目录),打开根目录的_config.yml文件,在末尾添加:

deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: master

仓库地址为前面创建的github仓库地址

  • 接着在终端执行以下命令:npm install hexo-deployer-git --save
  • cd到博客目录执行:hexo d

你会发现博客已经部署到giuhub仓库中,可以通过外网访问了。

5. 开始写博客

  1. 安装一个编写md文件的工具,例如我使用的是MacDown
  2. cd到博客目录执行hexo new "postName" 创建文章。
  3. 博客目录下的source/_posts找到你创建的文章,打开直接编写即可。
  4. hexo中文文档

6. 发布你的博客

每次编写博客的步骤:

  1. 本地写好博客
  2. 打开终端,cd到博客目录,执行 hexo clean 清空缓存
  3. 执行 hexo g 构建文章页面
  4. 执行 hexo s 本地预览整个站点
  5. 执行 hexo d 发布到Pages更新线上博客

7. 博客绑定自己的域名

域名解析CNAME记录到你仓库的默认域名,创建一个文本,写上你解析的域名,放在仓库根目录即可。

  • 重新生成网页文件会把 CNAME 文件覆盖掉,需要直接把 CNAME 文件添加到 source 文件夹里,这样每次推的时候就不用担心仓库里的 CNAME 文件被覆盖掉了。
  • 仓库设置中出现Domain's DNS record could not be retrieved.提示说明CNAME文件出错,检查该文件域名是否拼写错误,注意不要加协议前缀(如http)。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Hexo博客搭建】将其部署到GitHub Pages(三):怎么写作以及更新?
本系列文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到 GitHub Pages 应该怎么做,跟着此系列文章最终可以获得自己的静态博客网站。流程很长,分成不同的篇幅,此为本系列的第三篇。
326 0
【Hexo博客搭建】将其部署到GitHub Pages(一):前期要做哪些准备?
本系列文章属于半笔记半教程的零基础小白入门文,教你将 Hexo 部署到 GitHub Pages 的前期需要做哪些准备,跟着此系列文章最终可以获得自己的静态博客网站。流程很长,分成不同的篇幅,此为本系列的第一篇。
189 0
Hexo+OSChina(码云)+git 搭建个人博客
1). 安装Node 2). 安装Git 3). 注册码云 4). 安装Hexo npm install hexo-cli -g 图1.
2229 0
hexo+github搭建个人免费博客
最近在淘宝逛到一个卖盗版书的店铺,真的是便宜的不要不要的,哈哈。 网上hexo+github的博客教程太多了,我今天就讲讲一下实现小细节和思路吧,都是github上面的issue 看看我搭建的hexo主题的博客,哈哈 开始旅程了 创建一个github站点 可以参考鸿洋大神的如何利用github打造博客专属域名,这篇博文看下来,你就会拥有像我 这样MRw
2177 0
[Hexo]Hexo+github搭建静态博客
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SunnyYoona/article/details/51457626 1.简介 Hexo 是一个快速、简洁且高效的博客框架。
1436 0
+关注
茶无味的一天
公众号:品味前端
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载