Hexo+GitHub+Netlify一站式搭建属于自己的博客网站
“吾生也有涯，而知也无涯。”
都说每个做技术的人都应该有一个属于自己的博客网站，但是总是因为种种事情半途而弃，借着刚刚搭建完博客的热情写一下是如何搭建此博客的，其实现在搭建博客很简单，这套博客就是采用 Hexo + Github + Netlify 搭建的静态博客网站。
博客运行流程本地运行Hexo程序创建文章、程序修改等，将修改后的代码提交到GitHub，然后通过Netlify自动获取GitHub上的更新、部署、发布，这样就形成了一套自动更新部署发布的静态博客网站，下面让我一起来看一下是如何实现的。
Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。
安装
安装 Hexo 相当简单。然而在安装前，您必须检查电脑中是否已安装下列应用程序，这里默认你会使用Git，如果不会请看廖雪峰老师的Git教程：
Node.js，安装请参考文章Nodejs安装
Git，安装请参考Git安装
验证程序
Node.js验证：Windows系统打开cmd，然后输入node -v查看是否显示版本号，显示即表示安装成功，Mac和Linux则打开命令窗口同样验证即可。
Git验证：Windows系统在桌面右键看是否有Git bash here即可，打开后输入git验证，Mac和Linux则打开命令窗口输入git验证。
安装Hexo
如果您的电脑中已经安装上述必备程序，那么恭喜您！接下来只需要使用 npm 即可完成 Hexo 的安装。
$ npm install -g hexo-cli
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。就是你要将程序安装在所在文件夹的位置。
$ hexo init
$ cd
$ npm install
新建完成后，指定文件夹的目录如下：
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
然后在指定的文件内执行hexo server命令，然后访问 http://localhost:4000/ 即可访问本地已经部署好的Hexo网站。
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
Hexo配置及使用
配置
在指定的文件内找到_config.yml配置文件，Hexo的配置都在_config.yml文件内，大部分说明可以查看官网Hexo配置，如下配置可根据需要自行更改。
网站
配置 说明
title 网站标题
subtitle 网站副标题
description 网站描述
author 你的名字
language 网站使用的语言，中文：zh-Hans
其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。
网址
参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
网站存放在子目录
如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
扩展
配置 说明
theme 当前主题名称。值为false时禁用主题
deploy 部署部分的设置
theme参数后期修改模板会用到，自己设置模板修改成对应参数。
使用
配置结束后让开始创建一片文章，使用命令hexo new [layout]
。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。hexo generate命令在<folder>/public文件夹下生成静态文件，该命令可以简写为hexo g。发表草稿命令hexo publish [layout] <filename>。</p>
<h1 id="创建文件">创建文件</h1>
<p>hexo new HelloHexo</p>
<h1 id="生成静态文件">生成静态文件</h1>
<p>$ hexo generate</p>
<h1 id="发布文件">发布文件</h1>
<p>$ hexo publish HelloHexo</p>
<h1 id="启动服务">启动服务</h1>
<p>$ hexo server<br>
启动服务后即可在<folder>/source/_posts文件下看到生成的HelloHexo.md文件，可以修改后即可刷新http://localhost:4000/查看最新内容，更多使用参考官网标签使用。</p>
<p>上传GitHub<br>
在托管给GitHub之前先做一些准备工作，在<folder>文件下执行git init对git进行初始化，将对不需要上传的文件放入.gitignore文件中，使用命令echo "/public" >> .gitignore屏蔽public文件夹，然后提交所有文件。</p>
<h1 id="git-初始化">git 初始化</h1>
<p>git init</p>
<h1 id="屏蔽-public文件夹">屏蔽 public文件夹</h1>
<p>echo "/public" >> .gitignore</p>
<h1 id="添加到仓库">添加到仓库</h1>
<p>git add .</p>
<h1 id="提交文件">提交文件</h1>
<p>git commit -m "install hexo project"<br>
GitHub上创建远程仓库，选项都是默认即可。然后将<folder>文件夹与远程仓库绑定，绑定后提交文件到远程仓库。</p>
<h1 id="绑定远程仓库，是指你远程仓库的ssh地址或者https地址">绑定远程仓库，<your repo url>是指你远程仓库的ssh地址或者https地址</h1>
<p>git remote add origin <your repo url></p>
<h1 id="提交到远程仓库">提交到远程仓库</h1>
<p>git push origin master<br>
Netlify托管<br>
什么是Netlify？Netlify是一家国外的静态网站的托管平台，提供免费的https，自动化部署和升级，可以监控GitHub、GitLab或者Bitbucket做到自动更新发布，是不是很赞！这也是为什么现在选择Netlify的原因，至于以后Netlify怎么发展只能再议。</p>
<p>走到现在就差最后一步，是不是有点小激动，接下来让我们Netlifyhttps://www.netlify.com/的官网，然后点击右上角Sign up注册账号，选择GitHub关联登录。</p>
<p>Netlify Sign up</p>
<p>注册后点击创建新站点，选择GitHub会有提示框进行认证。</p>
<p>Create a new site</p>
<p>选择上传到远程仓库的hexo项目文件，然后进行关联。</p>
<p>continue paoject</p>
<p>最后发布项目，这个时候点击deploy site按键，万事具备可以嗑会瓜子喝点茶水然后回来看一下应该就部署成功了。</p>
<p>deploy site</p>
<p>部署成功后即可生成一个https://xxx.netlify.com带有netlify的域名，这时候访问域名就可以看到一个属于自己的博客网站了，是不是激动的跳了起来。随机生成的二级域名是一串随机的字母数字，如果不喜欢可以自己设置二级域名或者选择配置自己拥有的域名。</p>
<p>修改域名<br>
修改随机生成域名<br>
下面教你怎么修改https://xxx.netlify.com域名为你想要的免费域名，点击setting然后点击change site name初见弹出框，即可将xxx修改成想象中的名称。是不是很完美，没有问题就可以开始自己的博客之旅了！如果还想追求完美那么接着往下看。</p>
<p>change site name</p>
<p>修改为自己的域名<br>
很多朋友不想用带有netlify名称的域名，所以也可以像域名改为自己购买的域名，首先你要有一个域名并且已经备案，然后查看就可以进行下面操作了。</p>
<p>域名解析<br>
首先对域名进行解析，添加两条解析记录，一条A记录，一条CNAME记录。A记录的记录值IP是你https://xxx.netlify.com域名对应的ip，CNAME记录的记录值是https://xxx.netlify.com的xxx.netlify.com值，添加完解析后就可将你的域名绑定到Netlify了。</p>
<p>domain deal</p>
<p>绑定域名<br>
点击第二步：</p>
<p>custom domain</p>
<p>输入域名后验证：</p>
<p>add domain</p>
<p>添加成功后即可用自身域名进行访问：</p>
<p>domain_success_own</p>
<p>是不是很完美了，这个时候访问你的域名即可访问到属于自己的博客网站，恨不得现在就让全宇宙之后你的博客已经建成！下面还有一步就是添加https。</p>
<p>添加HTTPS<br>
Netlify 使用的是 Let’s Encrypt Certificate.的免费证书，自行按着步骤添加即可，我这里因为域名都是腾讯注册的，所以也附赠了ssl，不用白不用，现在教你如何添加自己的ssl证书。</p>
<p>首先下载自己的证书，会看到证书里有一个Apache的文件夹，里面有三个文件，结构如下：</p>
<p>.<br>
├── 1_root_bundle.crt<br>
├── 2_hhwen.cn.crt<br>
└── 3_hhwen.cn.key<br>
分别打开三个文件填入复制到下面的内容框中保存即可：</p>
<p>add sll</p>
<p>模板修改<br>
完美的博客之旅到这里是不是就是结束了，每一个拥有自己博客的程序猿都想有一个与众不同的页面风格，这里可以参考官网的主题进行修改，本博客使用的是GODBMW博主的BMW主题主题，喜欢的也可以关注，这里就由你们自己发挥我就不多介绍了。<br>
修改主题后记得去_config.yml中修改themes参数！</p>
<p>总结<br>
到这里已经结束了搭建博客之旅，但是我知道你还在兴奋当中，如果喜欢请收藏我的博客，写作当真不易比我搭建博客还要累。</p>
<p>这算是搭建此博客写的第一篇博客，写博客需要静下来把做过的事情再捋一遍一步一步进行拆解，也让自己更加深刻，也希望每一个搭建了自己博客朋友善待自己的博客不要冷落。</p>
<p>如果大家有疑问可以留言评论，感谢支持。</p>
</div>
</span>
</div>
<div style="text-align: center;">
<a href="https://www.cnblogs.com/Leo_wl/p/10137725.html" target="_blank" style="font-size: 16px;background-color: rgb(24, 144, 255); color: white;padding: 8px;padding-left: 30px;padding-right: 30px;border-radius: 2rem;">查看全文</a>
</div>
</li>
<div style="border: 1px solid #dfdfdf;border-top:none;"></div>
<li class="ul-li" style="padding-left:15px;padding-right: 15px;">
<b>相关阅读:</b><br>
<nobr>
<a href="lytwajue-p-6851527.html" target="_blank">hdu1231 最大连续子序列</a>
<br/><a href="lytwajue-p-6844415.html" target="_blank">Android 大众点评的接入</a>
<br/><a href="lytwajue-p-6844003.html" target="_blank">Android Volley分析（一）——结构</a>
<br/><a href="lytwajue-p-6843836.html" target="_blank">数字签名与数字证书技术简单介绍（一）</a>
<br/><a href="lytwajue-p-6842613.html" target="_blank">HDU-3681-Prison Break(BFS+状压DP+二分)</a>
<br/><a href="lytwajue-p-6842464.html" target="_blank">TNS-01201: Listener cannot find executablen 错误</a>
<br/><a href="tc310-p-3981310.html" target="_blank">Android学习笔记(20)————利用ListView制作带竖线的多彩表格</a>
<br/><a href="tc310-p-3981292.html" target="_blank">ListView美化：去阴影、底色、选中色</a>
<br/><a href="tc310-p-3976450.html" target="_blank">android 用ListView实现表格样式</a>
<br/><a href="tc310-p-3975614.html" target="_blank">Android播播放完SD卡指定文件夹音乐之后，自动播放下一首</a>
<br/> </nobr>
</li>
<div style="border: 1px solid #dfdfdf;border-top:none;"></div>
<li class="list-group-item from-a mb-2" style="margin:15px;">
原文地址：https://www.cnblogs.com/Leo_wl/p/10137725.html
</li>
</ul>
</div>
<!-- 右侧开始 -->
<div class="right-kd" style="margin: auto;margin: 0px;float: left;">
<ul class="right-kd" style="word-break:break-all;border: 1px solid #dfdfdf;border-radius: 3px 3px 3px 3px;padding: 0px;margin: 0px;">
<li class="ul-li-bg ul-li-title" aria-current="true" style="padding-left:15px;padding-right: 15px;">
最新文章
</li>
<li class="ul-li" style="padding-left:15px;padding-right:15px;">
<nobr>
<a href="gavanwanggw-p-6911593.html" target="_blank">Boost Log 基本使用方法</a>
<br/><a href="gavanwanggw-p-6911588.html" target="_blank">iOS项目开发实战——学会使用TableView列表控件（四）plist读取与Section显示</a>
<br/><a href="gavanwanggw-p-6911438.html" target="_blank">Java的接口总结</a>
<br/><a href="gavanwanggw-p-6911270.html" target="_blank">使用默认system_health分析死锁(Deadlock)</a>
<br/><a href="gavanwanggw-p-6911268.html" target="_blank">UVA 10042 Smith Numbers（数论）</a>
<br/><a href="gavanwanggw-p-6911264.html" target="_blank">Android与server通信的方法之中的一个（json）效率不高安全性不好</a>
<br/><a href="claireyuancy-p-6888597.html" target="_blank">使用 AFNetworking的时候，怎样管理 session ID</a>
<br/><a href="claireyuancy-p-6888217.html" target="_blank">一个简单的时间片轮转多道程序内核操作系统工作流程</a>
<br/><a href="claireyuancy-p-6887924.html" target="_blank">ViewPage+Frament+listView滑动效果</a>
<br/><a href="claireyuancy-p-6887826.html" target="_blank">HDU 4607 Park visit (求树的直径）</a>
<br/> </nobr>
</li>
</ul>
<ul class="right-kd" style="word-break:break-all;border: 1px solid #dfdfdf;border-radius: 3px 3px 3px 3px;padding: 0px;margin-top: 10px;">
<li class="list-group-item ul-li-bg ul-li-title" aria-current="true" style="padding-left:15px;padding-right: 15px;">
热门文章
</li>
<li class="ul-li" style="padding-left:15px;padding-right: 15px;">
<nobr>
<a href="claireyuancy-p-6886035.html" target="_blank">浅谈搜狐云景PAAS平台</a>
<br/><a href="claireyuancy-p-6885841.html" target="_blank">Python随机数生成方法</a>
<br/><a href="claireyuancy-p-6885607.html" target="_blank">VBScripts and UAC elevation（visa以后的系统）</a>
<br/><a href="claireyuancy-p-6885397.html" target="_blank">cocos2d-x 3.0游戏实例学习笔记 《跑酷》 第六步--金币&岩石加入而且管理</a>
<br/><a href="claireyuancy-p-6885158.html" target="_blank">SEAndroid安全机制框架分析</a>
<br/><a href="claireyuancy-p-6885007.html" target="_blank">怎样又一次编译linux内核</a>
<br/><a href="lytwajue-p-6852098.html" target="_blank">C99_变长结构体实现</a>
<br/><a href="lytwajue-p-6851908.html" target="_blank">Android多线程下载大文件解析</a>
<br/><a href="lytwajue-p-6851787.html" target="_blank">swift学习_xcode6搭建</a>
<br/><a href="lytwajue-p-6851604.html" target="_blank">hdu5296(2015多校1)--Annoying problem(lca+一个公式)</a>
<br/> </nobr>
</li>
</ul>
</div>
</div>
</div>
<div style="clear: both;"></div>
<!-- 栅栏结束 -->
<div class="kd" style="margin: auto;">
<div style="font-size:0.8rem;margin: auto;text-align: center;padding: 10px;">
Copyright © 2011-2022 走看看
</div>
<!-- 引入底部 -->
<!-- 百度自动推送js -->
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https'){
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else{
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<!-- 百度自动推送js -->
</div>
</div>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script src="https://www.cnblogs.com/js/blog-common.min.js"></script>
<script src="http://common.cnblogs.com/script/encoder.js"></script>
<script type="text/javascript">isPoped = false;</script>
<a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=1fogmr4h" id="redirect_url"></a>
<a href="https://www.cnblogs.com/Leo_wl/p/10137725.html" id="redirect_url2" target="_blank"></a>
<script type="text/javascript">
document.onclick = function()
{
if (!isPoped)
{
document.getElementById("redirect_url").click();
document.getElementById("redirect_url2").click();
isPoped = true;
}
}
</script>
</body>
</html>