如何搭建我的博客 - Hexo之Hello World

原文链接: http://fighting300.com...

其实很久以前就搭建完博客的基础部分,只是懒癌发作,迟迟没有补上文章来总结,但是记录自己的心得还是必要的。下面描述下搭建博客的整个流程和一些问题的解决方案。搭建博客其实有很多种框架,比如可能大家熟悉的WordPressHexo等,这里我们将使用很火很流程的Hexo来作为博客基础框架。

Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
搭建博客的大体流程主要分为:GitHub配置Hexo管理域名绑定三个步骤,非常简单。

GitHub配置

首先需要在GitHub上注册一个账号(当然估计你们都有了)。然后创建一个仓库,命名为xxx.github.io,xxx会是你注册时的用户名,所以注册账号时认真想个不错的名字吧,因为这个地址会是你的域名(假如你不单独申请域名的话)。

新建GitHub仓库

Hexo管理

环境安装

在进行下一步前,你需要在你的Mac上安装好git(没安装过的,直接去官网找吧,顺便面壁思过下)和Node.js。

Node安装的最佳方式是使用nvm,这是Node.js的版本管理器,安装方式很简单。

// 1. Homebrew 安装方式,此安装方式无需重启
$ brew install nvm  
$ mkdir ~/.nvm
$ export NVM_DIR=~/.nvm
$ . $(brew --prefix nvm)/nvm.sh
// 2. curl安装
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完nvm后,执行以下命令即可安装Node。

$ nvm install stable

Hexo安装:

$ sudo npm install -g hexo-cli

所有的工具已经安装完成,下面可以创建博客内容,并上传到我们的github仓库了。

创建博客

接下来需要用Hexo初始化博客,并更改设置,来发布内容到之前创建的GitHub仓库。

初始化博客

安装 Hexo 完成后执行下列命令,Hexo将会在指定文件夹中新建博客所需要的文件。

$ hexo init xxx.github.io
$ cd xxx.github.io
$ npm install

初始化后,你的文件夹里会有这些内容:

  .
  ├── _config.yml        #配置文件
  ├── package.json       #数据
  ├── scaffolds          #草稿
  ├── source             #网站内容
  |   ├── _drafts        #草稿
  |   └── _posts         #文章
  └── themes             #主题
更新配置

当然我们自己的博客,要选择好看的主题。Hexo比较好的一点是现在有很多免费的主题可以使用,只需要把主题文件文件拷贝到你的/themes目录下,做简单配置就可以使用该主题了。
知乎上有一篇文章罗列了一些不错的主题,大家可以参考下。这里我们使用了极简的NexT这款非常火爆常见的主题。

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

之后你需要在xxx.github.io/_config.yml中配置博客名、语言、作者等基础配置如下(键值之间需要有空白),可配置的选项可以参考Hexo配置

  title: DragonFly的博客
  subtitle: 我曾七次鄙视自己的灵魂
  description: iOS开发、ReactNative开发、AR
  author: DragonFly
  language: zh-Hans
  ......
  theme: next         // 之前下载的主题名称

这儿需要重点注意的是要配置博客提交的github地址。

  deploy:
   type: git    //使用Git 发布
   repo: https://github.com/xxx/xxx.github.io.git    // 刚创建的Github仓库

另外主题的配置文件也需要做一些修改,相应的文件目录为xxx.github.io/themes/next/_config.yml,可配置的选项可以参考NexT主题配置

新建一篇文章

所有基础框架已经创建完成,接下来你可以开始写第一篇博客了,hexo的命令也很简单,使用两次就记住了。

$ hexo new "My-New-Post"  // 这儿是你的文章标题,创建后可以在文档中修改

更多细节可以参考: Writing

启用本地服务

写完文章后,可以在本地启用服务,来看你的成果。在浏览器中输入https://localhost:4000即可访问你的博客主目录。

$ hexo server //hexo s
发布内容

测试没问题后,我们就可以生成静态网页文件并发布到GitHub Pages上了。

生成静态文件的命令:

$ hexo generate  //hexo g

发布的命令:

$ hexo deploy //hexo d

以上命令可以简写为hexo g -d,这样你的博客已经上传到GitHub了。此时你可以在浏览器里输入fighting300.github.io来访问你的博客。
另外第一次使用时,你需要在终端配置Github的邮箱和密码。

域名绑定

或许你对你的github域名不满意,想要使用自己独立的域名。那么你可以在阿里云旗下的万网购买域名(如http://fighting300.com),购买之后进行实名认证。

域名购买

创建CNAME文件

为了绑定域名,首先需要在source文件夹下创建一个CNAME文件,文件内容为你要设置的域名(如fighting300.com),这样将你的域名指向了Github服务器。用Hexo命令deploy后,几分钟后生效,你会看到你的仓库下GitHub Pages的信息已经发生变化。

GitHub domain

添加DNS解析

阿里云其实有自带的DNS解析服务,但是有小伙伴反馈他的DNS解析服务会有问题(目前使用过程中暂未发现),可以切换为DNSPod的解析服务。两种DNS的解析配置都很简单,只需要添加对应的IP地址到你的域名配置中即可。该IP地址使用ping fighting300.github.io来获取到。

阿里云DNS配置
DNSPod配置

完成上述步骤后,需要等一段时间上述配置才会生效,最后你的博客已经搭建完成,你可以开启你的博客之旅了。

My blog

本文将持续记录一些hexo使用方法和常见错误的解决方式,如果喜欢,请持续关注本博客。

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

推荐阅读更多精彩内容