不用花一分线，松哥手把手教你上线我的博客

上一篇：据说你的 IDEA 昨天掉链子了？松哥给你准备了大招
有很多小伙伴私信松哥，打听松哥的博客是怎么作的，其实这个我以前和你们聊过，今天就再来讲一说。

我记得是 2015 年 4 月 15 在CSDN上发表了个人第一篇博客，是一个学习笔记，从那以后开启了我博客写做之路，到今天为止 4 年多了。

这 4 年时间我在 CSDN 上发表的博客最多，共有 550 篇原创，CSDN 是个人大本营，不过在这期间也有断断续续在其余公共平台上发过博客，例如 sf、博客园、掘金、慕课网等，可是都是很是零散，2016 年的时候，利用个人 GitHub 也搭建了一个我的站点，可是只是试验了几个页面，并无好好去维护。

今年搞了一个本身的独立博客 http://www.javaboy.org ，从四月份到如今，博客 PV 和 UV 都以肉眼可见的速度增加，我也是蛮开心的。由于你们我的独立博客最怕的就是流量，这也是我把这个事情拖了 4 年才作的缘由之一，可是真正动手作以后，我发现搭建我的独立博客比想象的要容易不少，至于流量，只要内容 OK，流量也都不是事。

今天我就来和你们聊一聊如何搭建一个我的博客。

技术选型

目前静态博客站点很是流行，因此我其实不太建议你们再去搞动态博客系统，那样要操心的事情太多了。使用搭建静态博客，可让咱们把大部分精力集中在博客写做上，而不是无休止的耗费在博客搭建上（不少小伙伴搭建博客的时候兴致勃勃，搭建完成后就意兴阑珊，而后就没有而后了，空留一个博客网站摆在那里）。

静态博客选型，松哥目前接触到的主要是两种方案：

1. GitHub 上 结合 Jekyll 搭建的博客，Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，经过一个转换器（如 Markdown）和咱们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你能够发布在任何你喜好的服务器上。Jekyll 也能够运行在 GitHub Page 上，也就是说，你可使用 GitHub 的服务来搭建你的项目页面、博客或者网站，并且是彻底免费的。
2. 本地渲染好 HTML 后，上传到服务端，表明做品就是 hexo。

简单说，第一种方式，就是咱们在本地写好 markdown 以后，直接上传到服务端，服务端会自动渲染成 HTML，而后展现给用户，第二种方案则是咱们在本地写好 markdown 以后，在本地将 markdown 渲染成 HTML，而后将渲染好的 HTML 上传到服务端。（markdown 小伙伴们应该都了解吧，我就不作过多介绍了）

这两种方案松哥都有用，你们见到的 http://www.javaboy.org，是我使用 hexo+icarus 实现的。你们见到的 http://springboot.javaboy.org、http://spring.javaboy.org、http://springmvc.javaboy.org、http://mybatis.javaboy.org、http://maven.javaboy.org 等，则是我使用 Jekyll 来作的，两种方案各有优缺点，这个松哥后面再和你们详述。

今天主要和你们聊一聊 http://www.javaboy.org 站点的搭建，也就是我采用了 hexo+icarus 来实现的。

这个博客的全部资金投入就是几十块钱买了一个域名，再就没花钱了。站点托管在 GitHub 上，评论系统也用了 GitHub 来作，若是你能接受 GitHub 提供的默认域名，那你甚至连域名都不用买了，接下来咱们就来看看这个东西怎么实现。

若是你们玩过松哥的微人事(https://github.com/lenve/vhr)或者 V 部落(https://github.com/lenve/VBlog)，那么对于 hexo 上手可能很是容易，由于这个里边也使用了 nodejs，和微人事的前段操做有不少相同的地方。

博客搭建

用 Hexo 搭建，要是有一点点前端 Node 的使用经验更佳，没有固然也不要紧，由于与之相关的命令并很少。使用 Hexo 须要提早在电脑上安装好 Node 和 Git ，安装成功后，就能够开始 Hexo 的安装了。步骤以下：

1. 安装 Hexo

npm install -g hexo-cli

2. 在本地建立一个博客目录

hexo init blog

上面这个命令执行完后，会在本地建立一个 blog 目录，这里边就是独立博客所必须的一些文件，而后进入到这个目录中，执行 npm install 命令，安装相关的依赖。

安装完成后，会生成以下目录：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

这里几个文件/文件夹，咱们先来关注其中两个 _config.yml 和 themes 目录， _config.yml 文件中，咱们能够作网站的一些基本配置，例如 网站的 title，描述，关键字、图标等，这些配置大都见名知意。以下：

配置完成后，定位到 blog 目录，执行 hexo s 就能够在本地启动项目了，启动成功后，浏览器中输入 http://localhost:4000 就能够看到网站了。

说到 hexo s 命令，这里有几个经常使用命令须要给你们介绍下，分别是：

命令	简写	中文含义
hexo server	hexo s	本地启动
hexo generate	hexo g	生成静态文件
hexo deploy	hexo d	部署网站
hexo clean		清除缓存和已经生成的静态文件

这四个算是松哥这两天使用最多的命令，其余的命令，大伙能够参考https://hexo.io/zh-cn/docs/commands。

修改主题

通常来讲，主题都会本身配置一个，我的感受 Hexo 的生态仍是比较丰富的，有不少可选的主题，Hexo 默认使用的主题是 landscape ，松哥最先使用了 hexo-theme-next 主题。博客在本地跑起来以后，接下来就是修改主题，主题修改的第一步就是先选一个本身认为好看的主题，选好以后，首先将之克隆到 ./themes 目录下，这个目录下本来有有一个 landscape 文件夹，里边放的默认的样式，固然开发者也能够直接将主题文件下载好拷贝进来，可是我仍是建议使用 clone ，使用 clone ，假若有一天这个主题更新了，只须要 pull 一下就能够获取到最新样式了。

以 hexo-theme-next 主题为例， clone 命令以下：

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

克隆成功后，修改 hexo 的 _config.yml 文件，将主题修改成 next，以下：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

主题建立好以后，接下来就是对主题的配置了，这个比较容易，直接参考官方文档便可。配置完成后，执行以下命令，便可看到新的主题效果：

hexo clean
hexo g
hexo s

命令含义能够参考上面的表格，这里再也不赘述。

这个 next 主题我大概用了两三个月，如今换成了 icarus，你们在主题配置的时候，只要会配置一个，其余多个确定也就没有问题了。

绑定到 GitHub

你们可能已经火烧眉毛想要把博客上传到 GitHub 了，绑定到 Github 步骤也很简单，首先以 本身的GitHub ID.github.io 为名建立一个 public 仓库，例如个人 ID 为 lenve，建立的仓库以下：

建立成功以后，修改 hexo 的 _config.yml 文件，配置 GitHub 地址，以下：

deploy:
  type: git
  repo: git@github.com:lenve/lenve.github.io.git
  branch: master

这里根据本身的地址来配置便可，配置完成后，执行以下命令：

hexo g
hexo d

执行完成后，就能够将数据上传到 GitHub 了（固然这里须要你们提早配置一下 GitHub 的公钥，具体能够参考Git关联远程仓库）。

上传成功后，访问 https://lenve.github.io 就能够看到本身的我的站点了，这是 GitHub 默认给咱们提供的域名。

若是你对 GitHub 提供的域名不满意，也能够本身申请一个域名，分分钟就配置好了。

域名申请

域名申请建议使用国外的域名提供商，不用备案（一个字，快！不用等），松哥使用了 godaddy ，主要是由于这个服务商支持支付宝付款，域名申请就比较容易了，无需多说，不过相似的域名提供商其实不少，你们不必定用这个，也能够本身再看看。

域名和 GitHub 绑定

域名申请成功以后，接下来的配置，也分为两部分。

GitHub 配置

首先在博客所在目录下的 source 目录中（注意不要放错位置了），建立一个 CNAME 文件，文件内容就是你的域名，以下：

而后执行 hexo d 命令将这个文件上传到 GitHub 就能够了。

在网上看到有人直接在 GitHub 上配置这个，以下图：

这种方式也能够，这种方式会自动生成一个 CNAME 文件到当前仓库中，可是松哥在这里不推荐你们使用这种方式，由于若是你在本地执行了 hexo clean ，而后再去上传，就会丢失掉 CNAME 文件，而后又得从新配置。关键是当你执行了 hexo clean 以后，你可能还发现不了 CNAME 文件已经丢失了。

域名解析配置

域名解析这块，当时遇到了一些问题，后来松哥使用了国内的 DNSPod 去作域名解析了，没有使用 godaddy 提供的域名解析。使用 DNSPod 首先要作的，就是修改 godaddy 提供的域名解析服务，登陆本身的 godaddy 帐号，找到域名管理，修改域名解析服务为 DNSPod ，以下：

而后登陆到 DNSPod（没有帐号注册一个），而后添加本身的域名解析，以下图：

添加两条 A 记录，指向 GitHub 的 IP 地址，再添加一条 CNAME ，指向你的 GitHub 域名就能够了。

如此以后，大功告成！

总结

好了，不知道小伙伴们有没有 GET 到呢？这个不用花不少钱，就是一个域名的费用而已（若是你不想用 GitHub 提供的域名的话），也不须要额外买服务器，hexo 的使用也很简单，有兴趣小伙伴赶快实践下吧！