如果你现在还没有自己个人博客网站的话，那么我觉得你看完本篇博客后，强烈的建议你去折腾折腾下，搞个自己的，让自己也能够体验装X的感觉。
要想用搭建一个个人博客网站，首先你得有一个域名，这样别人才可以通过域名访问，其次你还要一个空间来存放你的页面。
空间空间有免费的空间，也有收费的空间。免费的当然就不够稳定了，收费的就很贵了，终究是很不爽，有没有什么地方是既免费又稳定的空间呢？有，Github。它允许上传个人网站项目并自定义你的域名，而且又有稳定的服务，实在是不能够在好了。
下面就一起跟着我来一步一步的利用Github搭建个人博客网站吧！
1.拥有一个域名
这个步骤我就不详述了。
打开腾讯云官网
搜索你想要的域名，下单买一个
2.拥有一个Github账号
互联网崇尚自由与分享。Github是一个全世界程序员聚集的地方，大家相互分享自己写的代码，提升别人，也提升自己。大家都在为着开源社区努力着。因为我从开源项目中学到很多知识，所以我也非常愿意分享我的所见所学所得，我的Github主页：
（欢迎follow和对我的项目给个star或者fork我的项目一起来和我完善项目）
如果还没有Github账号的话你就先去注册一个吧，有的话，直接登录就行，后面的操作都要用到Github的。
3.Github上新建个人网站项目
登录GitHub之后，在页面右上角点击+加号按钮，点击Newrepository。
由于我们是新建一个个人网站项目，所有仓库的名称需要安装GitHub个人网站项目的规定来写。
规则就是：
YOUR-GITHUB-USERNAME.github.io
比如我的GitHub用户名是zhisheng17，那我就要填写zhisheng17.github.io。然后选择公开模式，接着点击创建仓库按钮。
创建成功之后，进入了项目主页面。点击设置按钮。
进入之后，滚动页面到下方。点击页面自动生成器按钮。
点击右下方继续去布局按钮。
选择一个模板，点击发布页面按钮。
申诉已通过。
GitHub是一个用于使用Git版本控制系统的项目的基于互联网的存取服务,GitHub于2008年2月运行。在2010年6月，GitHub宣布它现在已经提供可1百万项目，可以说非常强大。
Github虽然是一个代码仓库，但是Github还免费为大家提供一个免费开源GithubPages空间，利用这个空间可以搭建轻量级的博客系统，绑定自己的域名，存放一些图片和文件等等。
于是我这几天都在研究怎么用GithubPages搭建一个个人博客，可惜由于对代码和git命令不熟悉，磕磕碰碰，在网上搜索GithubPages免费空间使用教程，比较少，而且不全面，或者说不适合像我这样从未接触过Github的人，有几次的按照网上的教程来做都失败了，主要是好步骤不知道如何操作。
中途也想到过放弃GithubPages，因为这样一个“如此麻烦”的空间即使搞定估计用途也不大。最后终于在大牛的指导和自己的摸索下建成了。并且Github是老牌开源的空间——稳定、不会随便删除用户数据，且没有外链流量限制。所以也是独一无二的了，就是操作麻烦点，新手不建议用。
一、申请GithubPages账号和创建项目
1、打开空间地址：
，点击“signUP”注册一个账号。
2、登录后，点击右上角新建一个项目，如下图：
3、创建完成后，会给出来该项目的代码。这里暂时不用管。
二、本地连接和管理Git项目
1、首先下载Git工具，这里为大家提供一个安装包RailsInstaller，里面已经包括了Rails3.0.3、Ruby1.8.7、SQLite3.7.3、Git1.7.3.1、DevKit，这些工具都是你深入学习git所必备的。
2、在RailsInstaller中运行gitbash，然后依次执行下列命令，配置你的git，代码如下：
gitconfig--globaluser.name"用户名"
gitconfig--globaluser.email"邮箱"
gitconfig--globalcredential.helpercache
gitconfig--globalcredential.helper'cache--timeout=3600'
3、执行代码效果如下图：
4、创建一个SSHKeys，输入下列语句，看看本地有没有sshkeys。
cd~/.ssh
5、显示如下图表示没有。
6、接下来创建SSHKeys，执行下列代码。
ssh-keygen-trsa-C"邮箱"
7、然后会要你选择保存的位置，直接回车即可，如下图：
8、接下来还要输入密码，如下图：
9、完成后，你就可以在你刚才保存的文件路径中看到一个id_rsa.pub文件了，公钥就在这里。
三、添加SSHKeys成功连接Github
1、用记事本打开id_rsa.pub，复制里面的东西，粘贴到Github项目的SSHKeys中，如下图
2、输入以下代码，测试是否可以成功连接。
ssh-Tgit@github.com
3、第一次连接还要输入Yes，确认一下，如下图
4、最后出现如下提示就表示连接成功了。
四、GithubPages搭建个人博客空间
1、在Github创建一个个人空间，有两种方法，一种纯代码手工创建。这里要涉及的专业知识就比较多了，有兴趣的朋友可以深入研究一下。如下图：
2、第二次方法就是，利用GithubPages自动生成网站页面。选择右上角的accountsetting（账户设置）后选择repositories（信息库），在右侧选择你的应用，然后选择setting（设置）如下图：
3、选择中间的“自动生成页面”，如下图：
4、接下来选择页面模板，如下图：
5、完成后，10分钟后就自动生成个人主页了。
申诉已通过。
一、为什么在GitHub上托管个人博客
为什么在GitHub上托管博客，这个问题可以分两步来问：
首先，为什么 可以 在GitHub上托管博客？
GitHub是一个基于git的版本托管服务网站，上面聚集着几乎全世界的程序大牛，还有着大量的牛逼开源项目。而项目一旦成长壮大，一个简单的名称和一段描述很可能就无法满足作者与读者的需要。此时，GitHub Pages 就应运而生，它允许用户用更具描述性的自定义页面代替源码列表。同时，用户也可以利用其作为个人或组织主页，将 静态 网页托管其上。
那么，在有着WordPress等等大量的开源博客系统的情况下，为什么选择在GitHub上托管博客呢？
对程序猿来说无比亲切，光是看起来感觉就很牛逼的"Git驱动式博客开发与发布流程"。
超级容易，5分钟包学包会的发布方式。
静态页面，建立简单，几乎没有安全性隐患，当然这也是缺点之一，静态页面无法做到太过复杂的交互设计和网站结构。不过作为一个简单的个人博客，也不太会有这样的需求
免费而可靠
更加详细的内容可以参见这里 todo: Jekyll + GitHub Pages 的优点与缺点
话不多说，现在就来试试看。
<p id="002"></p>
二、10分钟快速搭建一个博客原型
首先确认：
拥有一个GitHub账号
已经安装 Git ，（在Windows下，个人推荐直接安装 GitExtensions ，有中文界面，并且集成了git + putty + kDiff ，比较省心一点啦）
1.建立一个项目
先在GitHub创建一个项目，名字随意，尽量全部小写字母，避免随后会碰到的URL冲突问题
本地运行Git，随意选个目录，将刚才创建的项目clone下来
<!-- lang: bash -->
cd /d/
git clone
cd blogdemo
<br/>
<br/>
2.建立配置文件_config.yml
注意：之后建立的所有文档务必使用UTF-8 无 BOM 的编码保存
在项目的根目录下新建文件 _config.yml ，填写 baseurl: /blogdemo ， blogdemo是你的项目名称，这一行内容规定了整个网站的根路径，稍后会详细解释这样做的意义。
<br/>
<br/>
3.建立主页
在根目录下新建文件 index.html ， 内容像这样：
<!-- lang: html -->
---
title: Hello, My Blog
---
{{ page.title }}
先不用急着奇怪为什么一个html文件会出现"{}"这样的标签，这里使用的是 Liquid 模板语言 ，{{ page.title }} 表示“本页面的标题”，更详细的介绍我们以后再讲，不妨这样理解：
<!-- lang: python -->
#--- begin of page's head
title = "Hello, My Blog"
#--- end of page's head
print(page.title)
OK，那么博客主页设计完毕！（别吵...我答应过你要10分钟内搭建完成的...先弄个毛胚房意思意思，美化啊功能啊什么的晚点再说）
<br/>
<br/>
4.发布到GitHub
回到git bash, 检查一下 git status ，确认 _config.yml 与 index.html 无误后 add，commit，保持使用Git的良好习惯，记得添加提交描述
然后推送到GitHub，这里注意，因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages 下的内容进行自动生成操作， 所以本地的 master 分支应推送到远端的 gh-pages 分支
<!-- lang: bash -->
git push origin master:gh-pages
稍微等待一下，最多10分钟（通常不用那么久啦），访问 yourname.github.com/blogdemo
，（其中 yourname
是你的GitHub帐户名，blogdemo则是你的项目名）就会看见你的博客主页（确实很丑...而且完全不像一个博客的样子，不过别急，慢慢来比较
快~）
另外，如果不幸发现你的中文页面出现了乱码的情况，别着急，还是该死的UTF-8问题，后面我们会一劳永逸的解决他的，暂时先手动调整一下浏览器的编码。
<br/>
<br/>
5.在_posts内撰写文章，并在首页加入文章列表
在这段时间里，我们继续为你的博客添砖加瓦，让他拥有最基本的文章阅读功能，另外不断F5页面的同时也可以关注一下自己在GitHub注册时所用的邮箱，如果之前推送的内容有误的话，GitHub将以邮件形式提醒你生成失败。
回到项目根目录， mkdir _posts 新建一个目录，看名字也知道啦，这里存放你所有的文章。
进入_posts目录，新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle 这样。比如 2013-03-23-my_first_article.md，尽量避免空格或者其他乱七八糟的字符，这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml 中的 permalink 属性而改变，默认值为 date ，也就是我们刚刚创建的文件的样子，具体的规则可以看这里，后面我们也会讲到。
如果你发现了我刚才创建的文件后缀名是 .md ，熟悉GitHub或者StackOverFlow的朋友应该知道Markdown 格式，推荐使用GitHub托管博客的原因之一也正是如此，我们可以在大部分时候避开恼人的HTML，转而使用更加直观的Markdown语法。如果不熟悉也没关系，可以参见这份Markdown 语法说明，应该说是相当易学，并且在熟悉之后非常易用的。
回到主题，打开刚才创建的文件，输入如下内容：
<!-- lang: html -->
---
title: 我的第一篇文章
---
# {{ page.title }}
## 目录
+ [第一部分](#partI)
+ [第二部分](#partII)
+ [第三部分](#partIII)
----------------------------------
## 第一部分 <p id="partI"></p>
这里是第一部分的内容
----------------------------------
## 第二部分 <p id="partII"></p>
这里是第二部分的内容
----------------------------------
## 第三部分 <p id="partIII"></p>
这里是第三部分的内容
{{ page.date|date_to_string }}
这段内容中使用了最常用的几种Markdown语法，比如使用 # ，## 表示 HTML 中的 <h1></h1> , <h2></h2>。使用[text](link)创建超链接，使用 连续多个 - 创建水平线（注意：不包括最上端包围title所使用的横线，那里表示一个页面的“头属性”），等等。更多详细的语法可以在之前提到的页面查询，这里不再赘述，总之，这是一种更加贴近真实写作的语法，推荐大家尝试。
啊对了，最后面的那个 {{ page.date|date_to_string }} 是指显示本页的日期属性，并且转换为可读的字符串形式。同样也是Liquid语法。
OK，那么第一篇文章也写好了，再把最新的repo推送到github，稍等片刻，就可以...等下，忘记给文章加上入口的链接了。
Sorry啦，重新打开我们的 index.html 文件，添加内容，变成下面这样：
<!-- lang: html -->
---
title: My Blog
---
{{ page.title }}
{% for post in site.posts %}
{{ post.date|date_to_string }} <a href='{{ site.baseurl }}{{ post.url }}'>{{ post.title }}</a>
{% endfor %}
唔...都是Liquid的内容，简单解释一下，Liquid标记最主要分为两种，一种是直接输出变量内容，像这样：
{{ page.title }}
另一种则是逻辑命令形式的，像这样：
{% for x in y %} ... {% endfor %}
而刚才写进主页的内容，就是遍历所有post文件，然后逐一显示在页面上，这里需要注意的一点就是在创建文章的超链接时，除了 post.url 之外，也要注意在前面加上site.url
，原因前面也有提到过，我们正在创建的是 Project Pages
类型的网站，其最终生成的网址根目录是：username.github.com/projectname，而 post.url
生成的超链接仅仅会自动加上 username.github.com/ 这样的前缀。
现在检查一下更改的所有内容，确认不要犯下愚蠢的错误，比如把 "." 打成 "。"或者单词拼错之类的，提交并推送！
当当！如果一切顺利，就能看到你的首页外加文章列表闪亮登场。
<br/>
<br/>
6.增加模板套装_layouts
文章进行到这里，或许开头承诺的10分钟已经超过不少了...很抱歉我欺骗了你，不过至少我们进展很快～接下来——如果你仍有兴趣的话，让我们为网站增加一些统一性的风格设置。
回到项目根目录，新建文件夹 _layouts，顾名思义，“布局”是也。在 _layouts 中新建一个最基本的布局文件，姑且命名为default.html好了：
<!-- lang: html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
诺，首先解决了UTF-8的编码问题，随后指定了正文内容的位置，当然在这里只是一个最简单的内容，在body内仅有一个 {{ content }} 标签，你可以根据自己的喜好对页面进行任何改动，只要记得保留这个内容标签在你想要的位置就好。
然后我们修改index.html和刚写完的那篇文章，只要在头属性上加一句就好：
<!-- lang: html -->
---
title: xxoo
layout: default.html
---
我们当然还可以把这个结构变得更灵活一些，比如继续新增两个模板分别叫做l_post.html与
l_index.html，他们首先引用default.html，但在其基础上做出一定的修改。然后首页使用l_index模板，而所有的post文件
则使用l_post模板，等等等等，请随意发挥。但始终记得加上 {{ content }} 标签
再次推送到服务端，查看效果。
至少这一点我没骗你，要发布最新的更改实在是太简单了，只需要一次push而已。
那么，基本的项目结构如下：
.
|-- _config.yml
|-- _includes
|-- _layouts
||-- default.html
|`-- post.html
|-- _posts
||-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|`-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html
这幅图来自于：Yes We Jekyll，原谅我的懒惰，我实在不擅长排版...
github上部署的个人网站都是以 io结尾的 这是我的 xuhss.github.io 你在新建项目的时候 把名字叫做你的github用户名 那么 github会自动识别，你可以选个网站模版 创建成功后 就可以访问了
大家好，我是站长 polarisxu。
很早之前，我使用 WordPress 搭建了个人博客：，毕竟那时候 WordPress 是首选。现如今，大家似乎更喜欢静态博客，各种语言的静态博客生成器轮子不断，比如 Go 语言的 Hugo 就是一个静态博客生成器。我个人认为，静态博客生成器流行的一个很大原因，是 Markdown 的流行，开发人员习惯了使用 Markdown 进行写作。
对于我，有另外一个痛点。最近在公众号写了一些文章，希望同步到博客，只是文字还好处理些，如果涉及到图片，微信公众号上传了一次，博客还得再来一次，挺费劲的。同时，为了保留最原始的文字，原始博文放在 GitHub 是一个不错的选择（用 Git 保留你的修改，不要太棒好嘛！）。
既然博文都保存在了 GitHub 上，怎么方便快速的基于 GitHub 来搭建自己的博客呢？（有些人直接就让在 GitHub 阅读，虽然可以，但体验还是不太好，而且看起来没有那么高大上，是不是？）
我想过使用 GitBook 来搭建，安装时，发现官方已经不维护 gitbook-cli 了，而且每次新增加文章，都得维护目录等，也是挺费劲的。于是放弃了这种方式。
这时我想到了通过静态博客生成器来搞。最喜欢 Go，自然 Hugo 成为第一选择。
废话不多少，记录下我搭建的过程。
01 安装 Hugo你可以通过 下载相应的安装包，我喜欢源码安装。
$ go get -v github.com/gohugoio/hugo
如果你也想通过源码安装，请自行准备好 Go 环境。
查看版本同时验证是否安装成功：（查看该文时，最新版本可能变了）
$ hugo versionHugo Static Site Generator v0.76.5 darwin/amd64 BuildDate: unknown02 使用 Hugo
在你本机某个目录执行如下命令，创建一个网站，我使用 polarisxu 这个名字。
$ hugo new site polarisxuCongratulations! Your new Hugo site is created in /Users/xuxinhua/project/testhugo/polarisxu.Just a few more steps and you're ready to go:1. Download a theme into the same-named folder. Choose a theme from or create your own with the "hugo new theme <THEMENAME>" command.2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".3. Start the built-in live server via "hugo server".Visit for quickstart guide and full documentation.
进入 polarisxu 目录，查看目录结构如下：
$ tree.├── archetypes│ └── default.md├── config.toml├── content├── data├── layouts├── static└── themes6 directories, 2 files
接下来需要为我们的网站指定一个主题，这里我们选择 这个主题。
$ git clone themes/hermit
将该主题增加到网站的配置文件中，这样才能生效：
echo 'theme = "hermit"' >> config.toml
测试下是否成功，运行：
$ hugo serve
打开浏览器访问：:1313/，看到如下内容：
对该主题进行一些配置。一般的，主题会有例子，我们直接拷贝例子中的 config.toml 覆盖网站的 config.toml：
$ cp -rf themes/hermit/exampleSite/config.toml .
再次运行 hugo serve，页面如下：
可见，这个页面内容可以通过 config.toml 配置，根据需要做一些修改，页面变成这样：（不同主题可能不一样）
不过点击 「文章」 和 「关于」 都报 404。
增加列表页在 content/posts 目录下新增一个文件：_index.md，内容如下：
---title: "文章列表"---
这时（hugo serve 会自动编译）点击 Posts，页面如下：
增加 About 页面同样的，在 content/posts 目录下新增文件 about.md，正文内容随意，类似这样：
---title: "关于"date: "2020-12-01"---这是关于页面，polarisxu。测试文章
接着，增加一篇测试文章：
$ hugo new posts/my-first-post.md
这会在 content/posts 目录下生成一个 my-first-post.md 文件，里面内容如下：
---title: "My First Post"date: 2020-11-30T23:33:03+08:00draft: truetoc: falseimages:tags: - untagged---
其中 --- 之间的数据是文章的元数据，在 Hugo 中叫做 Front Matter。
随意增加一些内容，并做一些修改：（其中 isCJKLanguage: true 用于准确计算中文字数）
---title: "第一篇文章"date: 2020-11-30T23:33:03+08:00draft: falsetoc: falseisCJKLanguage: trueimages:tags: - 文章---这是第一篇文章。。。
查看文章详情：:1313/posts/my-first-post/。
如果文章完成，可以执行 hugo 命令，生成静态页面。默认会将生成的静态页面放入 public 目录中。
关于 Hugo 更多的定制，比如 theme 的定制，这里不过多讲解，有兴趣的自己琢磨。比如虽然 和这里的例子使用了同一个模板，但样子却有不少不同，你可以查看 ，对比到底做了什么，折腾一番，基本会了。
03 使用 GitHub Pages 部署站点这是 GitHub 为你和你的项目准备网站的，GitHub Pages 官方站点：，大概就是通过将网站内容放到 GitHub，通过 GitHub Pages 可以弄出一个自己的站点。它最常使用的是通过 Jekyll 这个站点生成器生成静态页面，有兴趣的自行查阅资料了解。我们应该使用 Hugo 生成静态页面，因此直接将静态页面部署到 GitHub Pages。
创建一个特殊的仓库在 GitHub 上创建一个仓库，不过仓库名有特殊要求。如果是个人账号，比如我的 GitHub ID 是 polaris1119，则仓库名是：polaris1119.github.io；如果是组织账号，比如 studygolang 这个组织，则仓库名是：studygolang.github.io。
配置仓库进入仓库的 Settings 页面，有一个区块叫 GitHub Pages，可以配置站点信息，比如内容来源、自定义域名、是否启用 HTTPS 等。
说明如下：
数据源默认使用主分支下的根目录，我个人建议改为 docs 目录；自定义域名如果留空，则默认仓库名就是你的域名，比如我这里的 polaris1119.github.io；如果配置了自定义域名，则需要在你的域名配置上 CNAME 记录。我这里就是 polarisxu 这个子域名的 CNAME 值是 polaris1119.github.io；如果配置了自定义域名，启用 HTTPS 需要等待一段时间才能生效；你可以在该仓库上正确的位置放置一个 index.html 文件，测试是否正常。
小细节：避免 Jekyll 起作用，可以在仓库根目录放一个空文件，文件名：.nojekyll
部署我们的站点这里有两种做法。
1）方法一
上面 Hugo 项目的代码直接推送到 GitHub Pages 这个仓库中，在通过 Hugo 生成静态页面时，指定目标目录为 docs：
$ hugo -d docs
这样 docs 下面的内容就是静态页面，是网站最终展示的内容。
2）方法二
Hugo 源网站内容单独放在一个仓，比如我放在了 这个仓库。这样分两个仓库相对麻烦先。但也有一个好处：GitHub Pages 站点有内容大小限制：不能超过 1 GB，这样分开可以节省空间，而且 Hugo 内容和站点解耦。
因此每次在 Hugo 站点项目写完文章后，需要生成静态内容，拷贝到 GitHub Pages 仓库，提交代码等。把这些步骤写成一个脚本，瞬间变简单了。
#!/bin/shhugocp -rf public/* ../polaris1119.github.io/docs/cd ../polaris1119.github.io/git add * && git commit -m 'new article' && git pushcd ../polarisxu/04 总结
技术人员搞个自己的博客还是不错的，开始时花些时间折腾一个自己喜欢的站点，之后就是抽时间产出内容了。通过上面的介绍可知，现在搭建一个站点，完全不需要投入任何 money。
怎么样？有没有冲动自己搞一个。欢迎交流~
