5分钟 0元搭建我的独立博客网站 Hexo+Github pages

文/北妈 

首发原创来自 前端最帅的公众号：前端你别闹  请微信搜索关注 

前端你别闹：多是妹子最多，和前端最帅的公众号！

阅读本文须要 3.5分钟

一

直接入正题，先看北妈我的博客地址：http://www.guoxiaobei.com

这个时代，普通人拥有本身的独立博客或网站有多么重要不用再说了，更不用说咱们是程序员。

好久以前答应过你们，点赞超过200，就放出独立博客教程，结果那篇文章直接到了300赞，无法逃了。

并且也足以证实，你们是多么渴望拥有一个本身的网站。

但传统意义上，创建网站是须要花钱的，服务器、数据库等，并且价格还不菲呢，那怎么办？

聪明人早有办法，那就是利用github + 自动生成程序+几句命令直接组建网站，其实网络有不少配置教程了。

若是以为北妈写的很差，能够自行搜索，大同小异，只不过我写的更为清晰、易懂。

先看下个人博客在github的 开源地址：
https://github.com/xiaobei666/xiaobei666.github.io.git

因为这个属于教程系列，涉及到一系列命令、代码、配置，因为在微信公众号很差展现，长篇也说不明白。

因此我把这个【5分钟 0元搭建独立博客系列】分为3篇，今天先放出“一”。

但愿你们多多转发和收藏，好东西千万不要捂着。

二

说明条件：Github Pages + Hexo + Node.js。

系统环境：我是MAC电脑的OSX系统，因此截图和命令都是mac的，但和windows同样，这个不用担忧。

大致流程：其实简单，就是命令

1. 拥有一个github pages

2. 在本地电脑里配置hexo的环境（hexo与github pages绑定，写博文修改博文等，生成静态博客)

3. 绑定本身的域名（也能够不用绑定，github pages有二级域名，只不过绑有一个属于本身的域名，才算真正的我的网站）

这是一篇有关如何使用Github Pages和博客程序 Hexo搭建本身独立博客的入门详细教程，里面介绍了如何将Hexo部署到本身的Github项目中，而且能够独立访问。

第一篇，先介绍 Github Pages + Hexo 是什么，而且安装命令和配置，达到本机访问。

第一步：关于Github、Github Pages创建仓库

1、Github的优势

• GitHub是基于git实现的代码托管。理论上能够创建无限个网站。

• GitHub能够无偿使用，而且快速稳定。

• Github上面不少开源库，因此你懂得。

2、什么是Github Pages

Github Pages能够被认为是用户编写的、托管在github上的静态网页。

它是github官方提供的，静态解决方案，就是为了让你展现本身的文档和网页效果

3、为何要使用Github Pages

• 能够绑定你的域名(但暂时貌似只能绑定一个)。

• 简单快捷，使用Github Pages能够为你提供一个免费的服务器，免去了本身搭建、购买服务器和写数据库的麻烦。

• 因此，这个Github Pages 其实就是传统意义的放网页的服务器，明白了么？

三
不用多问，按步骤开始

一、创建你的 Github Pages 仓库

建立Github Pages比较简单，只要你有一个github帐号在建立一个仓库就好了，可是这个仓库是有规则的，其格式必须为：你的名字.github.io

好比个人：xiaobei666.github.io

而后根据提示一直下一步就行，很是简单。

若是你连github 帐户都没有、不会建立，那么请你先去熟悉下github，否则咱们无法往下玩儿了。

若是你没听过github，我以为你能够退出程序员行业了。

二、安装 Hexo

前提：必须安装Node.js ，也就是要用npm命令来安装。若是你身为2019年的前端，连npm 命令都没用过，我请你赶忙学习了。

我这里默认你安装了node.js，若是我还交你怎么安装nodejs，是否是还要交你怎么开机？

Hexo介绍

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其余渲染引擎）解析文章，在几秒内，便可利用靓丽的主题生成静态网页。

Hexo的安装网上有不少教程，但不少都是粘贴复制，过期、过时的命令，并且版本不一样，命令也有差别，因此最好的仍是参考Hexo官方的安装教程来一步一步走。

Hexo安装

安装命令：$ npm install -g hexo-cli

打开你的系统终端，windows系统能够鼠标右键点击Git Bash Here，输入npm命令便可安装。

mac系统的不用介绍了吧。

npm install hexo-cli -g

npm install hexo-deployer-git --save复制代码

第一句是安装hexo。

第二句是安装hexo部署到 git page的deployer，两个都须要安装。

建立Hexo文件夹

安装Hexo完成后，根据本身喜爱创建目录（如F:\Blog\Hexo），直接进入F:\Blog\Hexo文件夹下右键鼠标，点击Git Bash Here，进入Git命令框，执行如下操做。

$ hexo init
 
$ npm install 
复制代码

安装 Hexo 完成后，Hexo 将会在指定文件夹中新建所须要的文件。整个过程都是自动化的。

执行 $ npm install 后，会根据 package.json 里的信息，自动安装插件，全部过程不用管。

这时候，其实hexo已经在你的机器上了，也就是咱们常说本地开发版。

若是你想看本地效果，就这样。

执行下面语句，执行完便可登陆 localhost:4000 查看效果

hexo generate
hexo server复制代码

到这里，篇幅已经很长了，因此今天第一篇到这里结尾。

已经实现了，让你看到庐山真面目，只不过这个“庐山” ，尚未正式对外发布。

但你已经能够在本地服务器，经过传统的 localhost:4000 查看而且修改了。

至于怎么写博客，你先看下这个hexo的官方说明记录，先了解个大概，后面第二篇，很快上来。

hexo 中文官方文档： https://hexo.io/zh-cn/docs/setup.html

三

天天金句：“哪里有人喜欢孤独，只不过不乱交朋友罢了，那样只能落得失望”

延伸阅读：

1. 年末了，当心这些现象。别再无动于衷

2. 找工做如何避免培训机构骗局
3. 我为什么一直强调外包公司别去

天天只想听大家说：小北最帅！

长按扫码关注我

前端你别闹

文/北妈

阅读本文须要 5.1分钟

一

接着第一篇 5分钟创建独立网站系列，戳这里：《5分钟 0元搭建我的独立博客网站（一）》

这个Hexo、GitPages系列，其实网络不少教程，但都不够易懂甚至很乱，这个系列没什么技术含量，但对步骤的合理梳理，却要求很高。因此，我应粉丝要求，抽空出一个这个系列。

本系列分为三篇（说明一下：此系列，写的很详细、也很累，比网络其余教程都清晰易懂，因此每篇都会打破我，每个月底才开一次赞扬的规矩，这几篇我都会开赞扬，O(∩_∩)O）。

第一篇，我简要介绍了如何在本机安装、运行、预览 hexo博客系统；还有和github的关系，github起了什么做用。不明因此的，请去回顾第一篇，这里不在阐述，

今天是第二篇，主要讲解如何一键、一行命令发布到github、gitpages；如何实现真正的外网访问，也就是让地球全部的人都能搜到你的网站。

第三篇讲解，如何美化本身的博客页面，毕竟“丑”，是咱们绝对不能容忍的；还有如何在静态博客 ，一键添加 评论功能；并且不用你去开发；再加一个SEO 建议。

废话不说，开始。下图是我执行本机命令

hexo init，npm install， hexo g ， hexo s 的本地演示结果

hexo init  // 这个是：hexo自动初始化配置文件、包括全部paceage.json依赖包

npm install // 这个不用北妈解释吧！安装全部paceage.json里的包

hexo g  // 这个做用是：自动将md文件，生成静态html、css文件

hexo s  // 启动本地hexo 服务器 http://localhost:4000/复制代码

而后打开，http://localhost:4000 就出现了下图本地样式。

固然了，默认的网站title是 Hexo。我把它改了，改为了个人标签，做为例子。

至于在哪里改，下面会讲解一个配置文件，一目了然，一看就明白应该。

二

认识目录

若是你在第一篇的教学命令，都执行正常后，你本地hexo文件目录应该是这样。

先来介绍下几个重要目录做用，否则你会一脸懵比。

其中 _config.yml 这个很关键。是你博客的全局配置文件，包括和github上传连接，都要在这里配置。

还有，我刚才说的网站title标题，就是在这里

而下图这里， _posts 下面则是你要用makedown语法，写的博客文章源文件。

看到了吗？我本地第一篇文章标题是：

而后，在我本地的hello world.md里是对应的。我写什么，他就更新什么，美不美？并且他会自动刷新。

写完，在命令行输入执行 hexo g 以后，都会自动生成静态文件 到 public 文件夹。而后在本地他会自动生成文章列表。

三

本地直接上传到Github

还记得北妈在第一篇让你在gayhub，创建的那个 xxx.github.io.仓库吗

这里就要起到做用了，它要做为你免费的服务器，来存你的博客文件了。

如今免费的服务器有了，那么咱们写完了文档，怎么从本地直接上传呢？不可能一个文件一个文件的去上传吧？

有方法，按个人配置好后，一行命令就能够自动上传到 git仓库了。

一、执行命令 安装 deploy git 插件

npm install hexo-deployer-git --save

// 这个是：hexo 和git自动对接上传的关键组件

复制代码

WARN 不用管它，那是建议，出现下面的提示，包就是安成功了。

二、在主题配置文件_config.yml中修改仓库地址。

拉倒 _config.yml 最下面一行。配置

deploy:
  type: git
  repository: 
    github: git@github.com:<username>/<username>.github.io.git
  branch: master复制代码

下图这是个人 地址

三、配置提交 github 认证方式

注意这里，执行hexo d，会直接提交github仓库，若是你没有认证github和本地的关系，会提示你输入用户名、密码，已验证你的身份。

我是推荐SSH公钥方式认证，但其实https 方式也行。只不过每次你往上更新，可能要输入你github 的用户名、密码。

就像这样

若是不想每次更新都输入，那你就要学会配置SSH全局公钥了。至于怎么配置全局ssh，我这里原本不想讲解了，就从其余地方直接放个连接吧，大家按照这个走就好了。

在 github 上添加 SSH key 的步骤：
https://www.cnblogs.com/ayseeing/p/3572582.html

配置好你仓库地址和认证方式后，请执行 hexo d 这个命令是把你本地的hexo博客静态文件，一键上传到github仓库。

若是成功 会是这样，生成一堆。

也就是把我本地的 http://localhost:4000/ 的文件，发布到xiaobei666.github.io 仓库。

原本这个仓库刚创建是空的。而后执行 hexo d而且成功后，刷新后是这样的。

那么ok，这里你们伙都熟悉了，就是经常使用的 css html img这些，纯净的静态资源。

里面有一个index.html.那么这个就是你主页的访问地址。如今你和其余人在浏览器输入 ：https://xiaobei666.github.io (固然是你本身创建的名字)

就能够直接在线访问，本身的博客了。

四

这里说明一下：

其实 GitHub Pages 这个服务，是github官方给你们的福利，只要你创建的仓库 名称符合 xxxx.github.io 这个规则名字，就默认开启 GitHub Pages。

而后你这个仓库，只要有index.html 命名文件，理论上均可以经过 https：//xxxx.github.io 直接访问到，懂了吗？

至于为什么绕这么大一圈，介绍那么多命令和hexo，那是由于hexo 能够直接美化页面（下篇讲），还有支持最便捷的makedowm 语法，一件生产静态文件，最主要能一键提交到github，你想一想省了你多少时间？

彩蛋操做～ 配置真正的域名

如今默认的域名仍是 xxx.github.io，是否是很没有感受？想不想也像我同样有一个专属域名呢？

北妈我的博客地址：

www.guoxiaobei.com

一、首先你须要去域名注册商（阿里云腾讯云等）买一个域名，看你我的了。反正价格都差很少。

三、本机先ping github.io ，获得真实的IP地址。

而后前往域名控制台解析此域名到github.io的数字 ip 地址，即185.199.109.153




以个人阿里云域名为例，以下图所示，添加两条解析记录：添加 A 记录指向 185.199.109.153 便可。

按个人记录，自行添加便可。

三、去根站点下source目录中添加名称为 CNAME 的文件。就叫作CNAME，这里不能错.

文件内容是你刚才购买的域名guoxiaobei.com，不要添加www、不要添加www、不要添加www。

四、命令行执行hexo d发布站点到 GitHub 库，这时在 Git 库应该就能看到 CNAME 文件，至此自定义域名设置完毕，过个几分钟，使用xxx.com便可访问站点。

ok，这篇到这里就齐活了，完美实现了 访问 xxx.com让全世界的人都能看到你了。你若是还不会，请仔细研究吧。

北妈累死了，我想你应该知道怎么作。

五

天天金句：“孤独一人也不要紧，只要能发自心里地爱着一我的，人生就会有救。哪怕不能和他生活在一块儿。”