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

2,645 阅读11分钟


文/北妈 

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

前端你别闹:可能是妹子最多,和前端最帅的公众号!

阅读本文需要 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的环境(hexogithub pages绑定,写博文修改博文等,生成静态博客)

  3. 绑定自己的域名(也可以不用绑定,github pages有二级域名,只不过绑有一个属于自己的域名,才算真正的个人网站)


这是一篇有关如何使用Github Pages和博客程序 Hexo搭建自己独立博客的入门详细教程,里面介绍了如何将Hexo部署到自己的Github项目中,并且可以独立访问。


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

第一步:关于Github、Github Pages建立仓库

一、Github的优点

  • GitHub是基于git实现的代码托管。理论上可以建立无限个网站。

  • GitHub可以免费使用,并且快速稳定。

  • Github上面很多开源库,所以你懂得。

二、什么是Github Pages

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

它是github官方提供的,静态解决方案,就是为了让你展示自己的文档和网页效果

三、为什么要使用Github Pages

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

  • 简单快捷,使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建、购买服务器和写数据库的麻烦。

  • 所以,这个Github Pages 其实就是传统意义的放网页的服务器,明白了么?



不用多问,按步骤开始

1、建立你的 Github Pages 仓库


创建Github Pages比较简单,只要你有一个github账号在创建一个仓库就行了,但是这个仓库是有规则的,其格式必须为:你的名字.github.io

比如我的:xiaobei666.github.io

然后根据提示一直下一步就行,非常简单。

如果你连github 账户都没有、不会创建,那么请你先去熟悉下github,不然我们没法往下玩儿了。

如果你没听过github,我觉得你可以退出程序员行业了。

2、安装 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仓库了。


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


npm install hexo-deployer-git --save

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

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


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

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


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

下图这是我的 地址



3、配置提交 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

1、首先你需要去域名注册商(阿里云腾讯云等)买一个域名,看你个人了。反正价格都差不多。


3、本机先ping github.io ,得到真实的IP地址。


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


以我的阿里云域名为例,如下图所示,添加两条解析记录:添加 A 记录指向 185.199.109.153 即可。

按我的记录,自行添加即可。

3、去根站点下source目录中添加名称为 CNAME文件。就叫做CNAME,这里不能错.

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

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

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

北妈累死了,我想你应该知道怎么做。

每天金句:孤独一人也没关系,只要能发自内心地爱着一个人,人生就会有救。哪怕不能和他生活在一起。