Hexo+GitHub Pages个人博客(1):搭建

对于喜欢折腾个人博客的人来说,一个可玩性强的博客/博客平台才是最适合自己的。可玩性包括自定义主题/功能,现有的通用型博客平台在自定义这一块上基本没法满足可玩性,太专业的博客系统对于非专业型人才来说门槛又比较高,并且管理繁杂。因此这里推荐一种比较简单的搭建个人博客方式:Hexo+GitHub Pages。

对于0技术基础并且无心折腾的人或者是只专注文字方面的作者来说,本教程一般不适合你,推荐使用通用型的博客平台-「简书

Hexo和GitHub Pages以及个人博客搭建的概念

Hexo 是一款快速/简洁/高效的博客框架,依赖于Node.js,拥有丰富的插件定制,并且支持一键发布到平台。它使用Markdown(或其他渲染引擎)解析文章,可以快速生成静态网页文件从而形成博客。

GitHub Pages 是GitHub推出面向GitHub用户的一个脱管静态网页的功能,允许用户在GitHub的服务器上上传自己的静态网页文件并提供访问浏览,以供用户做说明文档/博客等使用。

个人博客搭建,一般可以拆解为三个步骤:你需要去选择一个合适的博客系统,把系统上传部署到你所购买的服务器上,然后在服务器上设置好你购买的域名。

这样下来包含的时间成本(学习博客系统/服务器)以及金钱成本(购买服务器/域名)会比较高,而使用Hexo+GitHub Pages的方式去搭建博客,相当于GitHub帮助你购买了域名和服务器,省去了这两块成本,Hexo的简单上手性又减少了你学习博客系统的时间成本。

环境与前期准备

  1. 安装Node.js
    Node.js官网 下载对应平台的版本,推荐选择LTS稳定版,安装。
  2. 安装Git
    Git官网 下载对应平台的版本,安装。
  3. 安装文本编辑器
    下载你喜欢的文本编辑器,方便后面的文本/代码编辑,代码编辑器推荐Sublime TextVisual Code ,Markdown文本编辑器推荐 Typora ,安装。
  4. GitHub帐号与Pages(有帐号以及pages的可跳过)
    注册/登录Github帐号,新建一个「仓库(Repository)」,命名为「你的GitHub账户名.github.io」
  5. Markdown
    Markdown基本语法 入门,学会md文档写作有助于博客发布

GitHub Pages的部署

  1. 打开Git,输入GitHub的邮箱和用户名:

    git config --global user.email "yourname@gmail.com"
    git config --global user.name "yourname"
    
  2. 生成公钥:

    ssh-keygen -t rsa -C "yourname@gmail.com"
    
  3. 一路回车即可,公钥默认保存路径会显示出来

  4. 复制公钥:

    复制git窗口中「The key fingerprint is:」下面的一行内容

    SHA256:m9eyW063av9khxQbYP1dfbxWthzJIRV2wHAiWUragsM yourname@gmail.com
    
  5. 登录你的GitHub主页,添加SSH公钥:「Settings」-「SSH and GPG keys」-「New SSH key」

  6. 粘贴刚刚复制的公钥到「key」一栏中,在「title」一栏中填入对这个SSH公钥的说明,确认添加「Add SSH key」

  7. 完成以上步骤后,可在Git窗口输入以下代码验证SSH key是否生效:

    ssh -T git@github.com
    

这里的SSH公钥相当于你电脑访问你GitHub上博客的钥匙,添加了相应的公钥才能允许你向GitHub上部署/发布/修改你的博客

Hexo博客的初始化

以上各种环境以及前期了解准备后,我们终于可以着手搭建博客啦:

  1. 选择你想存放你的博客的电脑文件位置,在该文件夹右键,选择「Git Bash Here」

  2. 安装Hexo:
    在Git窗口中输入以下代码安装Hexo:

    npm install -g hexo
    
  3. 初始化Hexo:
    在Git窗口中输入以下代码初始化Hexo:

    hexo init
    
  4. 生成博客静态页面:
    在Git窗口中输入以下代码生成静态页面:

    hexo server(或者hexo s)
    
  5. 在浏览器输入http://locahost:4000 即可访问刚刚生成的博客,此时可以看到Hexo本身自动帮你生成的Hello World 文章

Hexo博客的上线部署

以上步骤完成后,你已经得到了一个本地部署的博客,那么接下来是如何将它发布到线上:

  1. 登录你的GitHub主页,点击你之前以账户名新建的「yourname.github.io」,点击「Clone or download」,复制该项目的SSH key

  2. 打开你存放博客的文件位置,找到「_config.yml」文件,使用文本/代码编辑器打开编辑

  3. 找到deploy 参数,将刚刚复制的SSH key粘贴到repo后面,其余参数按以下设置,保存:

    deploy:  
    type: git 
    repo: ssh:git@github.com:Yourname/yourname.github.io.git
    branch: master
    
  4. 在博客文件位置右键,选择「Git Bash Here」,输入「hexo deploy」或者「hexo d」

  5. 等上述步骤执行完毕后,在浏览器输入https://yourname.github.io 即可访问刚刚部署上线的博客,注意此处的yourname为你的github账户名称

Hexo博客的文章发布

我们已经将博客部署到GitHub线上了,不过显示的文章只有内置的一篇「Hello World」,如何才能换成我们自己的文章发布呢?

使用Git客户端新建和发布:
  1. 打开Git客户端,输入:

    hexo new  "articleName"
    

    articleName为你新建文章的标题

  2. 打开你的博客存放目录,新建的markdown格式的文章会放在「Source」-「_posts」下面

  3. 使用文本编辑器编辑刚刚你新建的文章

  4. 在Git窗口输入hexo g 生成静态文件,再输入hexo d 发布到线上

使用文本编辑器新建再用Git发布:
  1. 使用文本编辑器新建以及编辑markdown格式的文章
  2. 将写好的markdown格式的文章放到博客存放目录下的「Source」-「_posts」下面
  3. 在Git窗口输入hexo g 生成静态文件,再输入hexo d 发布到线上

完成文章发布之后,只需要浏览器打开你的博客地址,就可以看到刚刚发布的文章了

博客存放目录下的「Source」-「_posts」下面存放的都是博客文章,你也可以直接在这里删除你不需要的文章,例如系统自动生成的「Hello World」文章

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

推荐阅读更多精彩内容