基于Hexo搭建自己的博客小屋

作为一名技术人员没有属于自己的博客,就像是喜欢LOL的玩家却没有一款炫酷的皮肤一样,这不叫真爱😉 。虽然现在是微博的时代,讲究方便阅读,易传播,但是对于博客来说,特别是技术博客,专业性永远都是第一位的。我们需要用大大的篇幅去阐述自己对技术的理解并将其分享给其他人,所以无论社交软件如何发展,我们都需要博客。下面就跟着我一步一步搭建属于自己的博客小屋吧。

搭建环境

已经安装Git的Mac电脑,这个我默认你们都满足了😌

创建github page

首先注册github账号,然后在repository选项卡里New一个新的仓库来存储我们的网站

01.png

然后命名为username.github.io。

02.png

安装Hexo

在安装Hexo之前我们需要安装nvm和Node.js。

  • Hexo是目前很流行的博客管理框架,基于Node.js
  • nvm是Node.js的版本管理工具
  • 而Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

不太理解和想要深入了解各软件作用的同学可以自行google,接下来我们开始安装这些东西(确实挺多的)。

1、通过curl方式安装node版本管理工具nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

其他方式的安装可以自行google。

2、配置环境变量
完成之后nvm就被安装在了~/.nvm下,接下来配置环境变量
~/目录下看是否有.zshrc,.bash_profile,或者.profile,如果没有就新建一个.profile文件。
注意:.开头的文件是隐藏文件,在终端查看的时候使用命令ls -a,然后打开对应的配置文件在最后一行加上:

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

这一步的目的是每次新打开一个bash,nvm都会被自动添加到环境变量中。
3、验证nvm安装
在命令行输入nvm看到如下信息:

Node Version Manager

Note: <version> refers to any version-like string nvm understands. This includes:
- full or partial version numbers, starting with an optional "v" (0.10, v0.1.2, v1)
- default (built-in) aliases: node, stable, unstable, iojs, system
- custom aliases you define with `nvm alias foo`

Usage:
nvm help                                  Show this message
nvm --version                             Print out the latest released version of nvm
nvm install [-s] <version>                Download and install a <version>, [-s] from source. Uses .nvmrc if available
--reinstall-packages-from=<version>     When installing, reinstall packages installed in <node|iojs|node version number>
nvm uninstall <version>                   Uninstall a version
nvm use [--silent] <version>              Modify PATH to use <version>. Uses .nvmrc if available
nvm exec [--silent] <version> [<command>] Run <command> on <version>. Uses .nvmrc if available
nvm run [--silent] <version> [<args>]     Run `node` on <version> with <args> as arguments. Uses .nvmrc if available
nvm current                               Display currently activated version
nvm ls                                    List installed versions
nvm ls <version>                          List versions matching a given description
 (usually `~/.nvm`)

那么恭喜你!nvm安装成功了。这一步在我看来是最容易出错的。

4、安装node.js
如果上面的步骤完成了,node.js的安装就简单多了,直接:

nvm install 4

这个指令是安装nodev4.7.0版本
安装成功后可以使用nvm ls查看当前node版本号

5、安装Hexo
安装Hexo也比较简单

sudo npm install hexo-cli -g

配置Hexo站点

完成所需组建的安装,接下来就要建立本地站点,配置站点了。

1、本地新建博客目录
目录可以自由选择,我选择在主目录下:

~$ mkdir username.github.io
~$ cd username.github.io
~$ hexo init username.github.io

2、配置站点

在站点下有一个_config.yml,这里我们可以进行一些对博客的配置

language: en #语言设置
theme: next #主题设置,因为下面将使用next主题
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git

这里的repo就是我们新建仓库的git地址,之后发布的时候就会将内容发布到这个地址下。更多设置可以查看更多Hexo配置

3、配置主题

03.png

我使用的是目前最受欢迎的一款Hexo主题Next使用它的话,我们需要先把它clone到本地

$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

在theme文件夹内也有一个_config.yml文件,这里是用来配置主题的,详细设置

新建、发布博客

经过上面的努力终于可以开心的写博客了,Hexo博客是基于Markdown格式编译的,所以,我们需要了解常用的Markdown语法,不了解Markdown的可以点这里参考Markdown,以下命令均在博客站点目录操作

1、新建

hexo new "my blog"

文件生成在username/source/_posts/my-blog.md,打开文件,利用markdown语法将内容写到里面。

2、编译

hexo generate //可以简写为hexo g

这一步的作用是将刚才的markdown语法的博客内容编译成html语言。编译之后生成public文件夹,里面放的是生成的html文件。之后同步到github上的就是这个文件夹的内容。

3、** 开启本地服务**

hexo server //可以简写hexo s

这个命令的作用是开启本地服务。之后会有下面两条语句生成

INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

我们就可以访问 http://localhos:4000/预览博客内容了。

4、部署

hexo deploy //可以简写为 hexo d

部署的作用就是将博客内容发布到网络。执行完成之后我们就可以访问http://username.github.io了,当你能够看到自己写的内容呈现在自己眼前的时候有没有很激动呢。哈哈

5、清楚public内容

hexo clean 

这个命令用在当我们更改source内部的资源路径之后,执行此命令可以重新编译生成public文件夹。


好了,讲解到此结束,下一篇讲解如何发布博客到指定域名。这个是我的博客http://zhangferry.tk,欢迎访问

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容