2017-07-05

Hello World--Hexo + Oschina 搭建个人博客

不要因为走得太远，而忘了当初为什么要出发。

Hello World，我第一个正儿八经的博客๑乛◡乛๑

关于博客

搭建博客的初衷

说到为啥搭建这个博客，别人一般都是什么比较牛逼的想法，对我来说，初衷却是简单到过分ლ ( ◕ ᗜ ◕ ) ლ

就是作为印象笔记的普通用户，受不了每月仅有60M上传流量。对于还是菜鸟的我，需要学习的东西辣么多，好记性不如烂笔头✎，写着写着就满了。

印象笔记上传流量

这就很尴尬了。那么多知识点不能全装在我这小脑瓜里吧。(ಥ﹏ಥ) 我之前在博客园写过一阵子博客，但是由于用文本编辑器写太累了，哪有我的这个Markdown新宠得人喜欢。再加上模式固定，实在不招人喜欢了，弃之。后来公司一同事在培训时，分享了他的博客，年少无知的我看到之后，立马崇拜了起来。后来的后来，还是因为印象笔记的上传流量限制，让我误打误撞就建了个博客，于是就……于是就……这样诞生了。

搭建过程

使用工具介绍

由于宝宝是个穷人，买不起服务器，买不起域名(ㄒoㄒ)。想拥有自己的博客网站，就要用技术去解决了。（用技术解决不了的，我们在用Money）

码云Pages: 码云Pages 是一个免费的静态网页托管服务，你可以使用码云 Pages 托管博客、项目官网等静态网页。这样就不用购买服务器和域名了↖(^ω)↗，如果你使用过 Github Pages 那么你会很快上手使用码云的Pages服务。这里使用码云上的Pages 而不是用Github Pages，主要原因就是在国内没有VPN的话。。。你懂得！访问链接：https://git.oschina.net/
Hexo:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。使用者只需要专注于写博客而不需要关注网站是如何生成的。而且还有丰富的博客主题可以选择！链接：https://hexo.io/zh-cn/

搭建环境

1、安装 Node.js

参考：http://www.runoob.com/nodejs/nodejs-install-setup.html（other people say: Node.js 官方源默认是：http://registry.npmjs.org，但是由于在国外，说不定你使用的时候就抽风无法下载任何软件。如果没有VPN的用户最好切换一下npm的源，不然后续的步骤可能会让你想砸电脑，安装完后，在命令窗口执行下面代码）

1	$ npm config set registry http://registry.cnpmjs.org #切换npm为淘宝镜像

不过我安装时按照 runoob.com 中的步骤来是木有出现任何问题滴。

2、安装 Git

参考http://www.runoob.com/git/git-install-setup.html

3、安装 Hexo

（ ps：安装完Node.js和Git之后不需要配置些什么，只需要安装成功就行了，如果想明白原理的话可以深入的学习。）如果您的电脑中已经安装上述必备程序，那么接下来只需要使用 npm 即可完成 Hexo 的安装。打开cmd窗口（开始—->搜索框输入“cmd”，回车—貌似应该在git的命令行输入命令git bash here）输入下面代码：

1	$ npm install -g hexo-cli

安装完成后输入

$ hexo

显示如下图，则安装成功！关于Hexo的更多使用，参考官方文档：https://hexo.io/zh-cn/docs/

正式搭建博客

♥本地运行Hexo

在你喜欢的硬盘下建一个项目文件夹（名称随你喜欢，Blog、Hexo等等都可以），在该文件夹下，按鼠标右键出现如下图

点击Git Bash Here，进入如下窗口：

在窗口输入

1 2	#新建一个网站，没有设置folder，Hexo默认在目前的文件夹建立网站。 $ hexo init <folder> # 该命令会在目标文件夹内建立网站所需要的所有文件

新建完成后，指定文件夹的目录如下：

.
├── _config.yml #网站的配置信息
├── package.json #应用程序的信息，EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。
├── scaffolds #模板文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。	
├── source #资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
|   ├── _drafts #草稿
|   └── _posts #md文件
└── themes #主题文件夹。Hexo 会根据主题来生成静态页面。

输入：

1 2	#$ cd <folder> $ npm install #安装hexo依赖，hexo是基于nodejs开发的，npm是nodejs的包管理工具

输入：

1	$ hexo generate #生成静态文件到项目根目录的public文件夹中，可以简写为$ hexo g

到了这里，你已经建好了一个博客，不过现在只能在本地运行。下面是本地运行的命令：

1
2
3

#cd <folder> #切换到项目目录下，可以在项目目录git bash here,就不需要cd了
$ hexo server #启动本地服务。若是长时间未有响应，可能存在端口占用情况默认4000,输入该命令以启动服务器，您的网站会在 http://localhost:4000 下启动。
#如果想要更改端口，或是在执行时遇到了EADDRINUSE错误，可以在执行时使用 -p 选项指定其他端口$ hexo server -p 8000

浏览器输入http://localhost:4000就可以看到效果。如下：

默认配置运行效果

♥修改hexo主题

上面运行的只是Hexo官方默认的主题配置效果，想要个性一点？，下面我们就将他改造成自己想要的个性主题。

Hexo的主题都是一些前端民间高手写的模版，可以在官方收录的主题中去挑选：https://hexo.io/themes/

看上一个主题后点击下图位置，进入下载主题文件。如下图： HexoThemes

点击进入github代码界面：

yeleeThemeDownload

主题下载完成后，将主题文件放到到Hexo项目的thems文件夹下面：

yeleeThemeDownload2

接下来就是修改Hexo的配置文件_config.yml，将里面theme 对应的值改为之前下载的主题的文件夹名字，本文里面下载的主题文件夹名字为hexo-theme-yelee-master。之前默认是landscape.

editThemeName

注意：这里“：”后面必须要有一个空格，而且这个空格要在英文输入法下，不然会报一些稀奇古怪的错。

按照如下本地重新部署：

1 2	$ hexo generate $ hexo server

关于Hexo中_config.yml 文件的其他配置，大家可以参考官方的文档：https://hexo.io/zh-cn/docs/configuration.html

下载的每个主题中，有一个配置文件，名字也叫_config.yml，这里大家千万不要和之前Hexo根目录下的_config.yml搞混淆了，这里面配置的主要是些与主题相关的东西，比如一些文章阅读量，多说插件，cnzz站长工具等等的配置信息。一般里面也都有注释,一些主题在GitHub上面也都有主题安装的一些文档，写的都很详细。

♥编写博客文章

使用如下命令，会在Hexo项目的source 目录下的_posts 文件夹中新增一个md文件

1	$ hexo new "文章名称"

如果你使用过MarkDown 来写博客文章的话，接下来就简单多了，没使用过也没关系，推荐大家一个编辑工具马克飞象 链接：https://maxiang.io/，（或者使用Typora，小众MarkDown编辑器）在编辑器里面写好文章后，复制或另存为.md文件。

这里与普通的.md文件不同要在文件开头添加下面代码：

---
title: #文章标题
date: #文章日期 比如2017-07-05
categories: #文章分类 比如[XX学习笔记]
tags: #文章标签 比如[git,node.js,Hexo]
description: #文章摘要 比如："作为一名程序员，第一篇博客那必须是HelloWorld。"
---
啦啦啦啦啦，我是正文。。。。

在.md文件的开头添加上面代码，是为了让Hexo框架在生成网页的时候，设置相应的参数。

将写好的.md文件放入Hexo项目的source 目录下的_posts 文件夹中，可以看到里面有个hello-world.md 文件，这就是默认的文章。

重新在本地启动项目，访问就可以看到之前添加的文章。

♥将搭建好的博客部署到码云pages

在部署之前，我们需要考虑下面的事情：

Hexo部署到GitHub或码云 pages上的文件，是 .md（你的博文）转化之后的.html（静态网页）。因此，当你重装电脑或者想在不同电脑上修改博客时，就不可能了（除非你自己写html o(^▽)o ）。所以我们利用git分支来保存hexo网站文件和网站发布的文件，也就是每个想建立码云Pages的仓库，起码有两个分支，一个用来存放Hexo网站的文件，一个用来发布网站。

♥上传Hexo网站的文件

首先在 https://git.oschina.net/ 上注册一个账号。登陆后，点击页面右上角加号，选新建项目，填写相关信息后创建。在本地项目文件夹git bash here ,输入下面的命令，①本地初始化一个项目：

$ git config --global user.name "你的名字或昵称"
$ git config --global user.email "你的邮箱"
#如果已进行相关设置了，上面git 的基础配置命令不需要再执行，下面的命令在需要初始化版本库的文件夹中执行
$ git init
$ git remote add origin <你的项目地址> #注:项目地址形式为:http://git.oschina.net/xxx/xxx.git或者 git@git.oschina.net:xxx/xxx.git
#上面已完成了一次版本你的初始化，如果是从已有项目克隆（比如在另外电脑获取项目），只需执行 $ git clone <项目地址>

②完成提交：

$ git pull origin master #先获取远程文件
<这里需要修改/添加文件，否则与原文件相比就没有变动>
$ git add . #如果文件很多，可以借助第三方git管理工具，比如tortoiseGit进行add
$ git commit -m "第一次提交"
$ git push origin master #推送到远程

然后查看码云上项目：

git push

上面已经把hexo网站文件上传到码云这个代码托管平台。下面开始将博客发布到码云 pages上。

♥发布静态Html文件到码云 Pages上

Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。

1	$ hexo deploy

在开始之前，必须先在hexo的 _config.yml 中修改参数，一个正确的部署配置中至少要有 type 参数，例如：

deploy:
  type: git
  repo: https://git.oschina.net/chaxiaoniu/chaxiaoniu.git
  branch: public

这里repo配置的码云项目的HTTPS，branch分支配置的另外一个分支，刚刚上传的Hexo网站文件在master分支，这个public分支在码云项目上是不存在的，但部署到码云上，会自动上新建public分支以及上传代码。

配置Type类型为git，在这里我们就需要安装 hexo-deployer-git。参见https://hexo.io/zh-cn/docs/deployment.html

所以下面罗列真正部署的所要执行的命令步骤。

在本地项目文件打开git bash here ，输入以下命令：

1
2
3

$ hexo generate
$ npm install hexo-deployer-git --save #安装hexo-deployer-git，把public里面生成的文件推上到码云上。
$ hexo deploy #一键部署功能

部署成功之后，登录码云，查看之前创建的项目中出现了public分支以及本地项目中public 文件夹中的文件，这时候代表之前的部署是成功的。

publicBranchCode

然后如下图，启动码云的pages功能： openPagesService1

注意部署时选择public分支启动服务：

openPagesService2

这时候就看到之前和本地启动一样的效果了。博客部署完成，在这之后，只需要每次用Markdown写好文章后，放入Hexo项目的source 目录下的_posts 文件夹中，执行如下步骤：

1 2	$ hexo generate $ hexo deploy

更新博客就OK了。搭建结束搭建完之后可以修改自定义的配置文件 _config.yml ，以及更换成自己想要的主题 themes。

♥日常更改

在本地对博客进行修改（添加新博文、修改样式等等）后，通过下面的流程进行管理：

依次执行git add、 git commit -m "备注" 、git push origin master指令将改动推送到码云上（这个是hexo网站文件，放在master分支上）
然后执行hexo generate 、hexo deploy 发布网站到public分支上。

在本地对博客进行修改（添加新博文、修改样式等等）后，通过下面的流程进行管理：如果重装电脑后或者在其他电脑上修改博客，可以采用如下步骤：

使用git clone <项目地址> 拷贝仓库（默认分支为master）
在本地新拷贝的项目文件夹下通过Git bash here 依次执行下列指令：npm install、hexo generate、 npm install hexo-deployer-git --save 、hexo deploy （记得，不需要hexo init这条指令）。

好了，大功告成。Happy Ending＼（＠￣∇￣＠）／

Cherry Chang