5分钟 0元搭建个人独立博客网站（一）Hexo + github page

野性酷女 2022-03-27 05:26 142阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hsbGlseV8xMQ_size_16_color_FFFFFF_t_70][]

**一**

直接入正题，先看北妈个人博客地址：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建立仓库 ##

## 一、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，我觉得你可以退出程序员行业了。

![20190112101956976.gif][]

![20190112101956982.gif][]

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 将会在指定文件夹中新建所需要的文件。整个过程都是自动化的。

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1][]

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

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

如果你想看**本地效果，就这样。**

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

hexo generate hexo server

![640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1][]

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

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

但你已经可以在本地服务器，通过传统的 localhost:4000 查看并且修改了。

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

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

**三**

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

老规矩，是平时不开赞赏，月底统一交租，但不耽误你点 \[好看\]。

**但今天**，因为写的好，而且写的超级累，并且让你拥有了真正意义上的独立博客。

所以，今天我要开赞赏！

最后，今天有三篇文章，别忘了看嗯嗯。

**延伸阅读：**

1. [年底了，小心这些现象。别再无动于衷][Link 1]

2. [找工作如何避免培训机构骗局][Link 2]  
3. [我为何一直强调外包公司别去][Link 3]

**每天只想听你们说：****小北最帅！**

**扫一扫关注我**   
  
**前端你别闹 公众号**   
![70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hsbGlseV8xMQ_size_16_color_FFFFFF_t_70]: /images/20220327/d46f17de58794b3b84e765a33cde36d7.png
[20190112101956976.gif]: /images/20220327/7783b98ff88245db9b534c9f097df0ce.png
[20190112101956982.gif]: /images/20220327/537cfba50a4c4d00a3ad76d3d864d8f9.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1]: /images/20220327/9bc3df54134f42daa664aecf89ff3694.png
[640_wx_fmt_png_tp_webp_wxfrom_5_wx_lazy_1_wx_co_1 1]: /images/20220327/f964b7a2b2a74f0887f34e699e59601e.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247485946&idx=1&sn=d250590359e04be82315e2037ebd39b4&chksm=eca792fedbd01be8fff61e3751a59b216ca34c7b8bb517025bc2548cb374258287ef184d5ca3&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247484632&idx=1&sn=54b09accba6aed5c572b171140ed02d9&chksm=eca79fdcdbd016cacbe68809790b9189dd7b2aadbbd174f42983b7d4075e2765cf74074e9060&scene=21#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzI5ODM3MjcxNQ==&mid=2247484619&idx=1&sn=2ba508d950592f1104dfd4b98351e7ee&chksm=eca79fcfdbd016d98df6bdd34a32853a388fef843fe6193a5fa399f31fc8213510bab1842552&scene=21#wechat_redirect
[70]: /images/20220327/b21c7cfc302f4f0b9b1b0512e36a4ea3.png