Hexo+GitHub Pages搭建简洁优雅的个人博客

大家好,我是 Day。上周突然意识到个人博客的重要性,不仅是写技术相关、兴趣相关亦或是简单的碎碎念,有一个博客对于给简历增加亮点,引发自己思考甚至是提升表达能力都有很大的作用。大家通常都说网上写博客有三个阶段:

第一阶段,刚接触 Blog,觉得很新鲜,试着选择一个免费空间来写。

第二阶段,发现免费空间限制太多,就自己购买域名和空间,搭建独立博客。

第三阶段,觉得独立博客的管理太麻烦,最好在保留控制权的前提下,让别人来管,自己只负责写文章。

本文的目标是使用 Hexo 搭建一个自己的博客,并配上非常优雅的 NexT 主题,并把博客托管到 GitHub 上,实现传说中的第三阶段。


几个概念

1. 什么是 Hexo,什么是 NexT 主题?
Hexo 是一个基于 Node.js 的静态站点生成框架,快速、简洁且高效。Hexo 主要使用 Markdown 解析文章,在几秒内,即可利用靓丽的主题生成静态网页。NexT 是其一个非常简洁优雅的主题。

2. 什么是 Markdown?
Markdown 用过一些简单的标记,让你的文字实现精致的排版,实现易读易写,无需考虑美化,专注文字本身。

3. 什么是 GitHub ?
GitHub 是基于 Git 技术的社交编程及代码托管网站。你可以用它对你的项目进行版本控制,也可以浏览学习、参与开发别人的开源项目,甚至可以交友。

4. 如何把这些名词串联起来?

  • 安装必要的软件后,使用 Hexo 创建你的本地博客,生成静态页面;
  • 将静态页面托管到 GitHub 上,这样别人就可以通过公开网址访问你的博客了;
  • 下载 NexT 主题美化你的博客样式。

使用 Hexo 创建本地博客

安装 Git

  • Windows:下载后一路安装 git-for-windows(国内下载点).
  • Mac:使用 Homebrew, MacPorts
    $ brew install git
    或下载 安装程序 安装。
  • Linux (Ubuntu, Debian):
    $ sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):
    $ sudo yum install git-core

安装 Node.js

  • Mac / Linux:使用 curl 或 wget 下载安装
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

重启终端并执行下列命令: $ nvm install stable

  • Windows:下载后一路安装 Node.js

安装 Hexo

先创建自己博客文件夹,比如 D:/hexo。
$ cd your-hexo-site # 切换到你的本地博客文件夹
(Windows 用户直接在该文件夹下右键打开 Git Bash Here)
$ npm install -g hexo-cli

初始化自己的博客静态网站

$ hexo init  # 生成一些必要的初始文件
$ npm install  # 安装依赖包
$ npm install hexo-deployer-git --save  # 为了可以将网站部署到 GitHub 上
$ hexo g  # 生成静态页面
$ hexo s  # 打开测试服务器

浏览器打开网址:http://localhost:4000/,这就是最初的样子。


配置 GitHub

  1. GitHub 官网 注册一个账号,记得注册邮箱和用户名,建议用户名和邮箱的用户名一样,建议此时学习一些 Git 和 GitHub 的基本知识。

  2. 本地打开命令行或 Git Bash,配置本地需要连接的账号:

$ git config --global user.name "yourname"  # 设置用户名
$ git config --global user.email "your_email@youremail.com  # 设置邮箱"
  1. 配置 SSH,建立本地与 GitHub 账号之间的连接密钥:
$ ssh-keygen -t rsa -C your_email@youremail.com`
  1. 网页登录GitHub,点击头像 - Settings - SSH and GPG keys - New SSH key 上。p.s. Mac / Linux 下密钥在 ~/.ssh/id_rsa.pub;Windows下密钥在 C:\Users\用户名.ssh\id_rsa.pub

  2. 验证是否成功:
    $ ssh -T git@github.com

  3. GitHub 上新建仓库,命名为 {your_name}.github.io,其中{your_name} 必须与你的用户名一样,这是 GitHub Pages 的特殊命名规范。仓库的 Settings 里,下拉到 GitHub Pages 里,点击 source 中 None ,修改其为 master 分支,也就是作为部署 GitHub Pages 的分支,然后点击 save。


配置、美化本地博客

安装 NexT 主题

  $ cd your-hexo-site # 切换到你的本地博客文件夹
  $ git clone https://github.com/iissnan/hexo-theme-next themes/next

配置站点_config.yml文件

以 D:/hexo 为例,【站点_config.yml】 即为 D:/hexo/_config.yml,如果你的 Windows 电脑里没有代码文本编辑器的话,这个后缀的文本应该是打不开的,我使用的是 Atom 编辑器,你也可以使用 notepad++,VS code等,其他操作系统默认都有 vi 之类的编辑器可以打开。

  • 找到 language 字段:可修改值为 zh-CN
  • 找到 theme 字段,修改其值为 next
  • 找到最后 deploy 字段,修改如下:
type: git
repository: https://github.com/{your_name}/{your_name}.github.io
branch: master

部署到 GitHub

$ hexo clean  # 删除原来的静态页面
$ hexo g  # generate 生成新的静态页面
$ hexo d  # deploy 将页面部署到 GitHub 上

访问 https://{your_name}.github.io 就可以看到你的博客网站了!
一般部署之后需要等待一段时间博客网站才会刷新,如果你想一边配置一边看效果,可以再打开一个 Git Bash,输入$ hexo s # 打开本地测试服务器,浏览器打开localhost:4000 即时查看变化。


自定义配置、写文章

  1. 可根据 Hexo 文档NexT 文档,自由配置,主要要注意两个文件,站点配置文件 (D:/hexo/_config.yml) 和主题配置文件(D:/hexo/thems/next/_config.ym) 。

  2. 写文章的一般流程:
    $ hexo new post <title> # 在source_posts下生成 post 布局的<title>.md 文档
    使用支持 Markdown 的编辑器打开写文章
    文章写完后,执行

$ hexo clean
$ hexo g
$ hexo d

发布更新到 GitHub Pages。

推荐阅读我的下一篇文章:Hexo+NexT优化部署、个性化配置、美化全攻略

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

推荐阅读更多精彩内容