摘要：就拿本篇教程为例，发布第一篇文章。十分钟免费博客建站教程如果你没有自定义的路径的话，默认生成的文件都会在目录下。具体语法请移步官网最后附上我的博客链接嘤嘤嘤填坑小窝
title: Hexo+NexT+Heroku十分钟免费博客建站教程
date: 2016-10-29 20:57:20
author：嘤嘤嘤
接触互联网到现在不长不短也有两年了，从最开始连css都不会写的小白，到每天对着一堆看不懂的英文文档持续蒙蔽和抓狂的新手，再到现在积累了一定的项目，中间也经历了踩坑无数和填坑无数的学习过程。但由于之前过于偷懒，这么两年下来啥也没留下。是时候觉得应该要好好记录下自己的成长经历了。之前一直觉得很多东西网上一搜教程一大堆，自己写了也没啥意思，无非也就是复制粘贴。可是编码本来就是一个建立复制粘贴的基础上学习的过程。之前看到有人说自己写博客写教程不是为了给别人看的，主要是对自己所学知识的一种总结。现在自己也算是正式进入互联网行业开始工作，这次折腾这个也算是迎来一次崭新良好的开始吧。本来之前想自己写站，整个博客系统写了将近四分之三了吧，最后觉得一开始就写得不够好，即使勉强上了后期也很难维护，反而给自己又找了个偷懒的借口。干脆就懒得折腾，直接用开源的框架库吧。
说到博客建站的话现在网上各种各样框架和解决方案就多了去了，什么WordPress啊，GitHub Pages啊真的是肥肠容易挑花了眼。出于颜值和方便的考虑，最终选择了Hexo（这货支持macdown啊这货一键发布啊这货各种啊……蛤蛤蛤）。好吧，废话说完就直奔主题吧。
第一步首先当然是安装Hexo，安装过程十分easy，照着官方文档走一遍要不了几分钟就OK了。当然前提是你已经装了Node.js和Git。（没装的筒子请自行移步官网，Windows童鞋请自动忽略此文……对我是Mac狗表示不会用Windows囧）
Mac童鞋没装Xcode编译会报错哦～装个Xcode先。Xcode 完成后，启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。
假如前提条件都OK的话，安装就是一条命令的事儿：
$ npm install -g hexo-cli建站
嗯，一条命令敲完就直奔主题了，奏是辣么迅速。随便进个文件夹，然后执行以下三条命令，博客就建好了（想想自己之前还费劲写半天，好心酸）：
$ hexo init$ cd $ npm install
完成之后奏是介个样子的目录结构：
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themespackage.json
这个文件也就不多说什么了，总之你想装啥都可以在这里配置，EJS, Stylus 和 Markdown renderer 已默认安装，可以自由移除。
_config.yml这个文件就是一些站点基本信息的配置,具体参数请移步官网。只是有一点肥肠重要！这个文件中所有冒号后面的空格必须严格检查，只能有一个且是半角，不要用Tab，不然你就会看到这样错误：
end of the stream or a document separator is expected
基本配置好了后执行以下命令，就能在本地跑起来了，访问网址为：http://localhost:4000/。
$ hexo server
默认跑在4000端口，当然你也可以用-p参数自行制定端口，以下就是什么配置都没有做跑起来的结果：
默认的主题landspace还不错吧，感觉是要比什么WordPress，GitHub Pages好看一些吧囧……但是还是不够……所以第二个主角登场了：NexT
安装NexT到站点目录地下执行以下命令：
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
然后打开刚刚说的站点目录底下的配置文件_config.yml，将theme字段更改为next:
theme: next
然后呢就算是配置好了，但是在切换主题之后、验证之前， 最好使用 hexo clean 来清除 Hexo 的缓存。然后跑起来看一看：
$ hexo s --debug // 调试模式，观察是否有错误信息输出
然后呢就是这个样子：
想要修改主题的默认配置可以修改themes/next/_config.yml文件。更多细节就不再赘述，请移步Next看官方指南。之后也会针对NexT再写一篇进阶指南。
安装Heroku到现在为止呢站点算是建好了，接下来就需要部署了。之所以选择Heroku也没别的，因为 free而且速度还OK。
首先安装Heroku。Homebrew的同学请往下看，其他同学请移步Heroku官网下载。
$ brew install heroku-toolbelt $ heroku update
下载好了之后需要先初始化一个Heroku的应用，先进入站点目录下登陆Heroku：
$ heroku login Enter your Heroku credentials. Email: yyy@example.com Password: ...
然后创建一个应用：
$ heroku create
体现hexo强大的地方到了，你可以直接跳过Heroku文档里一堆复杂的部署步骤，因为hexo本身就支持一键部署，首先先下载个heroku部署插件：（温馨小提示 --save就是默认下载到dev文件下）
$ npm install hexo-deployer-heroku --save
接下来就是修改配置文件了(站点目录下的__config.yml)：
deploy: type: heroku repo:message: [message]
repository url就是Heroku库（Repository）地址，到你的heroku所创建的app里面Settings就能看到。就是Git URL所对应的地址。message就是自定提交信息，默认为 Site updated: {{ now("YYYY-MM-DD HH:mm:ss") }})。这里建议没有特殊需求的小白们为空就好，不然姿势不正确乱七八糟一堆报错。
好的，接下来离成功还有一步之遥：
$ hexo deploy
按下回车坐等看到INFO Deploy done: heroku的输出信息，你就可以打开刚刚的Heroku库地址看到你新鲜出炉的博客了。
绑定域名当然如果你不满足herku给你分配的域名，你也可以绑定你自己的域名，但是需要heroku需要你绑定信用卡。
进入你的app的Settings界面找到Add domain如下：
添加完自己的域名之后会生成一个CNAME记录。修改你的域名的DNS记录，调整CNAME记录，等待新的解析生效即可。到此，恭喜你，你可以在新博客里面肆意折腾了。
接下来就该发文了吧。就拿本篇教程为例，发布第一篇文章。
$ hexo new Hexo+NexT+Heroku十分钟免费博客建站教程
如果你没有自定义source的路径的话，默认生成的文件都会在source/_posts目录下。
建议还是写一下tags date等信息，方便你通过标签和日期管理文章。写好之后生成页面并部署网站：
$ hexo generate -d
虽然说呢hexo是支持macdown的，但是生成页面的时候还是需要自己的规则，比如引入的外部链接，所以如果完全按macdown的语法来写，生成页面会报错。具体语法请移步官网
最后附上我的博客链接：嘤嘤嘤填坑小窝
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91117.html
摘要：如果实在不会安装可以去网上找教程。打开，跳转到刚刚创建的文件夹位置，运行命令然后会在你的文件夹中搭建好了环境配置配置修改一些你的博客名字描述作者等。基于我的个人经验，建议都开启开启标签页命令，在博客目录添加元数据开启分类页命令，在博 Windows环境下Git安装、配置SSH key、安装node.js npm、安装Hexo及配置、发布博客 前言 使用github pages服务搭建博客的...
摘要：自建主要花费在购买云服务器上和静态资源托管上，剩余工作一力承担。 写这系列文章的初衷是：对自己知识面广度和深度的确定，并以此调整后续的发展和学习方向。希望能达到温故而知新的效果。 选择从建站入手，是因为这个是最常见的要求。对于公司而言，网站是展示公司主旨、业务、沟通方式、宣传营销的必选方案，一个符合公司形象的高质量官网，必然能让客户留下良好的第一印象。，对个人而言，博客是表达其特有的思...
说在前面本地使用macOS，vps系统为debian 8；虽说是跳坑指南，但是这篇文章本意也仅仅自用，总结一下自己遇到的问题和解决方法，仅供参考，如有其他问题请百度(google) 整体思路：本地调试完的hexo项目文件通过git推送给vps，然后直接部署在vps上使用域名来访问，这样一个属于自己的blog就可以完成了 showImg(https://segmentfault.com/img/bV...
摘要：设置什么是本用于介绍托管在的项目，不过，由于他的空间免费稳定，用来做搭建一个博客再好不过了。你可以通过来访问你的个人主页。执行过程中可能需要让你输入账户的用户名及密码，按照提示操作即可。推荐使用腾讯公益。 系统环境配置 要使用Hexo，需要在你的系统中支持Nodejs以及Git，如果还没有，那就开始安装吧！ 安装Node.js 下载Node.js参考地址：安装Node.js 安装Git...
摘要：搭建个人博客二更改博客主题上传源代码本文简单介绍搭建博客。本文主要目的是对学习内容进行总结以及方便日后查阅。以后每次部署完一篇新的博文后，博客就会更新然后你还要要一下生成博客的程序代码，以防万一。 Hexo+GitHub 搭建个人博客（二）：更改博客主题、上传源代码 showImg(https://segmentfault.com/img/bV5VBL?w=800&h=400); ...
阅读 2088·2021-11-23 09:51
阅读 3697·2021-10-20 13:49
阅读 1705·2021-09-06 15:13
阅读 1815·2021-09-06 15:02
阅读 3154·2021-09-02 15:11
阅读 889·2019-08-29 15:37
阅读 1731·2019-08-29 13:24
阅读 2273·2019-08-29 11:28
