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

安装完成后输入

1
$ hexo

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

1

正式搭建博客

♥本地运行Hexo

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

2

点击Git Bash Here,进入如下窗口:

3

在窗口输入

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

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _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文件不同 要在文件开头添加下面代码:

1
2
3
4
5
6
7
8
---
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 ,输入下面的命令,①本地初始化一个项目:

1
2
3
4
5
6
$ 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 <项目地址>

②完成提交:

1
2
3
4
5
$ 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 参数,例如:

1
2
3
4
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

♥日常更改

在本地对博客进行修改(添加新博文、修改样式等等)后,通过下面的流程进行管理:

  1. 依次执行git addgit commit -m "备注"git push origin master指令将改动推送到码云上(这个是hexo网站文件,放在master分支上)
  2. 然后执行hexo generatehexo deploy 发布网站到public分支上。

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

  1. 使用git clone <项目地址> 拷贝仓库(默认分支为master)
  2. 在本地新拷贝的项目文件夹下通过Git bash here 依次执行下列指令:npm installhexo generatenpm install hexo-deployer-git --savehexo deploy (记得,不需要hexo init这条指令)。

好了,大功告成。Happy Ending\(@ ̄∇ ̄@)/

相关链接

搭建博客

博客美化:

文章目录
  1. 1. 关于博客
    1. 1.1. 搭建博客的初衷
  2. 2. 搭建过程
    1. 2.1. 使用工具介绍
    2. 2.2. 搭建环境
    3. 2.3. 正式搭建博客
      1. 2.3.1. ♥本地运行Hexo
      2. 2.3.2. ♥将搭建好的博客部署到码云pages
  3. 3. 相关链接
|