在GitHub上快速搭建属于自己的个人博客（如何用github搭建网站）

创建 GitHub 账号

如果您有GitHub 帐户，则可以跳过此步骤。如果您没有帐户，请注册一个。

1、注册具体步骤如下：

访问GitHub官网：https://github.com/
单击注册按钮。单击右上角的“注册”或下面的“注册GitHub”。
输入您的用户名“用户名”、电子邮件地址“电子邮件地址”和密码“护照”，然后单击下面的“创建帐户”。
对于个人计划，选择免费（开发者可以付费创建私人仓库），然后单击继续。
然后，您可以选择您的个人计划并单击“提交”，或者选择“峰会”而不输入任何内容，或者您也可以跳过“跳过此步骤”。
选择“跳过此步骤”后，您需要登录您在注册期间提供的电子邮件地址，并打开GitHub 发送给您的确认电子邮件。
如果登录邮箱后发现没有收到电子邮件，则需要输入电子邮件设置并重新发送。
单击邮箱中的验证电子邮件地址，将重定向到GitHub 登录页面，输入您的用户名和密码以完成注册（您将成功登录）。

2、如果需要GitHub账号注册图解，请参考以下文章：

最新GitHub账户注册（详细图） 如何注册GitHub账户
3. 配置SSH 密钥

为什么要这么设置呢？
提交代码需要GitHub 权限，但直接使用用户名和密码并不安全，因此我们使用SSH 密钥来解决本地到服务器的连接问题。

cd ~/.ssh # 检查本机上现有的ssh 密钥
如果您看到“没有这样的文件或目录”提示，则意味着您没有配置SSH 密钥。

ssh-keygen -t rsa -C \’电子邮件地址\’ # abc@126.com
连续按Enter 键三次。最后，打开您的用户目录，找到.ssh\\id_rsa.pub 文件，打开GitHub 主页，然后复制内容。个人设置- SSH 和GPG 密钥- 新的SSH 密钥：

将复制的内容粘贴到“关键内容”输入框中，输入您选择的标题，然后保存。

在终端输入以下命令测试是否成功：

ssh -T git@github.com # 注意邮箱地址不用改
当出现“您想继续连接（是/否）吗？”消息时，输入“是”，您将看到以下内容：

嗨dgynfi！身份验证成功，但GitHub 不提供shell 访问。

此消息表明SSH 已配置成功。

此时还需要进行以下配置：

git config –global user.name \’dnynfi\’ # github 用户名，而不是昵称
git config –global user.email \’xxx@163.com\’ #github 请输入您的注册邮箱地址

搭建 GitHub 博客

创建仓库

创建一个名为username.github.io 的新存储库。例如，如果您的github用户名是test，则创建一个新的仓库，网站访问地址为test.github.io（必须是您的用户名，其他名称无效）。以后是https://test.github.io，我觉得会很方便。

请注意，每个Github账户最多只能创建一个可以通过域名直接访问的仓库。

有几点需要注意：

您需要确认您注册的电子邮件地址。如果你不检查它，你就不会成功。仓库名称必须是username.github.io。其中用户名是您的用户名。仓库创建不会立即生效，需要一定时间。
创建成功后，您网站的所有代码都会放在这个仓库中。

搭建网站

对于初学者来说，建立个人博客网站还是有点困难的。最直接、最方便的方法是分叉和克隆您喜欢的网站模板。
接下来我会介绍一下我的博客，下面预览一下，然后分成四个部分。

汉森的博客

开始
环境需求开始创建博文组件
侧边栏关于我标签云好友链接HTML5 演示文档布局评论和Google/百度分析
检查网站分析详细信息部分
定制基于标题的图片搜索显示标题绑定域名

环境要求

如果您安装了jekyll，则只需在命令行中输入jekyllserve 即可在本地浏览器中预览主题。您还可以输入jekyllserve –watch 在修改文件时自动运行修改后的文件。

据@BrucZhaoR测试，这两个命令似乎都可以自动运行修改后的文件，并在更新后提供实时预览。官方文档建议安装bundler，这样本地效果和github上一样。更多详细信息请参见：https://help.github.com/articles/using-jekyll-with-pages/#installing-jekyll

开始

通常你可以通过修改_config.yml 文件轻松开始构建自己的博客:

# 站点设置
title: 汉森的博客# 您的博客网站标题
SEOTitle: 汉森的博客| 汉森的博客# 稍后会详细说明
description: \’Hansen\’s Blog\’ # 说点什么并解释一下。
#SNS设置
github_username: dgynfi # 你的github 帐户
weibo_username: u/2617525300 # 微博账号，底部链接会自动更新。
#构建设置
# paginate: 10 # 您计划在一页上有多少篇文章？
在Jekyll 官方网站上，有很多参数可以调整，比如设置文章链接格式。网站地址在这里：Jekyll – 官方网站，中文版在这里：Jekyll中文版。

写一篇博文

您发布的文章通常以md/markdown 格式放置在_posts/中。只需看一下这篇模板文章即可快速了解如何设置。

yaml 头文件看起来像这样:

—
布局: 帖子
title: “你好2015”
副标题:“你好世界，你好博客”
日期: 2015-01-29 12:00:00
作者:“dyf”
header-img: \’images/post-bg-distance.jpg\’
标签: 生活
—

侧边栏

喜欢这个:

博客侧边栏.png

此设置位于_config.yml 文件的侧边栏设置部分。

# 侧边栏设置
sidebar: true #添加侧边栏
sidebar-about-description:“请简要介绍一下自己”
Sidebar-avatar: /images/avatar.jpg # 照片请使用绝对地址。
侧边栏的布局是响应式的。如果屏幕尺寸小于992px，侧边栏将移至底部。有关更多信息，请参阅Bootstrap 网格系统https://v3.bootcss.com/css/。

关于我

迷你关于我此模块在您的头像下显示您的所有社交帐户。
这也有一个响应式布局，当屏幕变小时会移动到页面底部，但请参阅代码了解详细信息。

标签云

Medium 这个网站上的标签云非常好，所以我添加了它。该模块是独立的，现在可以显示在所有页面上，包括主页和所有已发表文章的标题。

#特色标签
特色标签: 真实
featured-condition-size: 1 # 如果标签的大小超过此条件值，则该标签将被推荐
唯一需要注意的是，如果features-condition-size: 标签的大小超过此条件值，则该标签将被推荐。
有一个用于过滤的内部条件模板{% if tag[1].size {{site.featured-condition-size}} %}。

好友链接

友情链接部分。这将显示在所有页面上。

此设置位于_config.yml 文件的Friends 部分，您可以自行添加。

#朋友
好友:【
{
title:“谁写博客”，
href: \’http://foo.github.io/\’
},
{
title: \’酒吧博客\’,
href: \’http://bar.github.io\’
}
]

HTML5演示文档布局

HTML5 幻灯片布局：

这部分用于占据HTML格式的幻灯片，常用的有Reveal.js、Impress.js、Slides、Prezi等。我想知道为什么现代博客不能发布HTML 幻灯片？

主要原理是添加一个iframe，并在里面添加外部链接。也可以直接写在头文件中。具体请看下面如何编写yaml头文件。

—
布局:主题演讲
iframe: \’http://hansenteng.com/js-module-7day/\’
—
iframe 在不同设备上自动调整大小。保留填充，以便移动用户可以向下滚动并添加内容。

评论

本博客支持duoshuo评论系统以及disqus评论系统。

disqus在全球范围内比较流行，界面非常活泼简洁，如果有人评论，可以直接回复通知邮件。缺点是你必须注册一个disqus 帐户才能发表评论，并且分享通常只能在Facebook 和Twitter 上进行。另外，墙内的加载速度有点慢。如果您想知道它是什么样的，请参阅此处的先前版本并在底部查看它。

日本主流社交软件很多都有分享按钮，方便登录和管理，但界面有点丑。当然，你也可以自定义界面的CSS。有关更多信息，请参阅多索开发者文档。

首先，您需要在disqus 或Duosuo 上注册一个帐户。请不要直接使用我的。

然后只需将其设置在下面的yaml 头文件中即可。

duoshuo_username: _您的用户名_
＃ 或者
disqus_username: _您的用户名_
最后，多硕支持分享。如果您不想分享，请设置为duoshuo_share: false。你可以同时使用两个评论系统，但这对我来说感觉很奇怪。

网站分析

网站分析现已支持百度统计和谷歌分析。您需要在官网注册并粘贴下面返回的代码。

#百度分析
ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900
＃谷歌分析
ga_track_id: \’UA-49627206-1\’ # 格式: UA-xxxxx

x-xx

ga_domain: hansenteng.com

自定义

如果您想尝试一下，可以在我的模板中自定义代码。 Grunt环境已经搭建完毕。 （感谢Clean Blog 提供此模板）

它执行许多任务，包括缩小JavaScript、编译LESS 文件、添加横幅以保持Apache 2.0 许可证完整，以及通过在构建命令行上键入grunt 来运行grunt 的默认任务。如果您使用JavaScript 或LESS，则可以使用grunt watch。

了解了_include/和_layouts/代码后，您可以直接修改Jekyll Liquid 模板，进行更具创意的定制。

标题底图

您可以选择自己的基于标题的图像。查看一些示例帖子以了解如何设置它。参见[_posts]。

基于标题的图像选择完全取决于个人审美，所以我无法帮助你。每篇文章可以有不同的基础镜像。确保它足够宽并且不要太大。否则加载会很慢。

但请注意，此模板的标题是白色的，因此背景颜色必须设置为灰色或黑色。也就是说，深色是合适的。

搜索展示标题

我的博客标题是“Hansen\’s Blog”，但我希望它在搜索时显示“Hansen\’s Blog | Hansen\’s Blog”，但我需要定义一个SEO 标题。

事实上，这个SEO标题定义了头部标题的title/title/head，你可以更改这个内容和在多索上分享的标题。

绑定域名

当然，你也可以使用默认的xxx.github.io来访问，无需绑定域名。如果您想要更加个性化并拥有自己的域名，那也可以。

首先，您需要注册您的域名。此前，域名注册推荐使用godaddy。其实我觉得现在国内的阿里云、腾讯云也都不错。毕竟他们是大公司，所以你不用担心。

绑定域名有两种情况：带www和不带www。

设置域名最常见的两种方式是CNAME 和A 记录，其中CNAME 输入域名，A 记录输入IP。没有www方式只能使用A记录，所以需要先ping一下IP。接下来，进入域名的DNS 设置页面，将A 记录指向您ping 的IP，并将CNAME 指向username.github.io。这允许访问，无论用户名如何。像这样添加www：

接下来，进入您的github项目的根目录并创建一个名为CNAME（无后缀）的新文件。测试后，输入您的域名并根据您的喜好添加www。

如果你填写不带www的表格，比如mygit.me，你会被引导到http://www.mygit.me或者http://mygit.me，但是如果你填写带www的表格，比如www，就会自动跳转到http://mygit .me 要做的事。对于.mygit.me，即使您访问http://www.mygit.me 或http://mygit.me，输入任何其他子域名（例如abc.mygit.me）也会自动将您带到http://www.mygit.me 。 mygit.me 没问题，但是当我访问http://mygit.me 时，它不会自动跳转到http://abc.mygit.me。

另外，绑定新域名后，原来的用户名.github.io不会失效，而是自动跳转到新域名。

这里有一些参考文章，供想要尝试的同学参考。

使用hexo+github搭建免费的个人博客详细教程基于github搭建自己的个人博客使用Github搭建自己的博客

最后

附上项目博客和仓库地址。请给一颗星。我希望这对任何有兴趣在GitHub 上构建个人博客网站的人有用。

博客地址【https://dgynfi.github.io】

仓库地址【https://github.com/dgynfi/dgynfi.github.io】

请点赞并关注我们，第一时间获得技术资讯和最新知识！

最后祝大家生活愉快~

#以上GitHub快速搭建个人博客相关内容来源网络，仅供参考。相关信息请参见官方公告。