MacOS上基于Github的hexo博客

本教程主要是为了记录此博客的搭建过程,让自己对学习搭建博客的历程有一个更清晰的认识,而不是稀里糊涂把各种官方文档啊博客啊七拼八凑的倒腾出一个博客,自己不明不白的都不知道为什么就搭起来了。

​ 很早以前就有搭建博客的想法了,既然想好了以后是要走技术路线,起码要有一个像样的博客。并且我可以在博客里记录最近学的一块知识点,或者新技术等等,并且讲这些东西系统的、规范化的整理起来,巩固自己的同时,也能把这些东西让其他需要的人看到,这是一种很棒的感觉!

​ 像这么一个博客,我从hexo是什么都不知道到搭建出这么一个像样的博客配置好主题推送到GitHubPage上花了将近快四个小时,中间遇到了无数的坑,磕磕绊绊的也完成了。所以只要有肯折腾,对自己有信心,没有什么做不出来。

我的博客地址:Cloud-Wong

​ 那么下面就正式进入教程吧:

1. 准备工具--配置搭建环境

  • 操作系统:MacOS
  • Github账号

  • 包管理工具:Homebrew

  • 版本控制:git

  • Node.js

  • hexo

1.1 GitHub账号

  1. 百度GitHub进入官网
  2. Sign up for Github
  3. 填写账号信息,什么姓名啊邮箱啊
  4. 选择免费的用户计划
  5. 完成注册

参考教程:github注册教程地址

1.2 Homebrew包管理工具

  • 作用:在Mac中方便的安装软件或者卸载软件,例如git、node.js、等等。

  • 安装 Homebrew

    在命令行输入:

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    

1.3 版本控制工具:git

两种安装Git的方法:

  1. 在安装homebrew的基础上,用命令行

    brew install git
    
  2. 从AppStore安装Xcode,Xcode集成了Git,不过默认没有安装,你需要运行Xcode,选择菜单“Xcode”->“Preferences”,在弹出窗口中找到“Downloads”,选择“Command Line Tools”,点“Install”就可以完成安装了。

1.4 安装Node.js

Node.js可以生成静态页面,也有两种安装方式:

  1. 在安装好包管理工具的基础上,用brew来安装,在命令行输入

    brew install node
    

    某些地区某些时间可能会被墙,如果网络状况不好那可能是被墙污染了,采用第二种方式即可

  2. node.js官网下载安装包安装

    Markdown

1.5 安装hexo

当Node.js和Git都安装好后就可以正式安装Hexo了,终端执行如下命令:

sudo npm install -g hexo

接着会提示输入管理员密码,输入完毕后等待安装完成

2. 初始化本地博客

​ 以上工作完成以后,可以说是万事俱备了。该有的都有了,那么博客就可以正式的开始搭建了。

​ 第一步:找一个存放你整个博客站点文件的目录。以我的为例,我在/Users/yunhuang 下创建了一个名为myblog的文件,用于存放我的博客站点。

​ 第二步:创建成功后

cd /Users/yunhuang/myblog 

​ cd来到你创建的目录下,执行hexo init命令

hexo init blog

等待安装完成后的提示:

Markdown

再一次cd到初始化创建产生的blog文件

cd /Users/yunhuang/myblog/blog 

然后执行如下命令,安装npm

npm install

进入blog文件内,看一看hexo初始化后的文件目录是不是包含以下:

_config.yml    
db.json 
node_modules 
package.json
scaffolds
source
themes

到此,博客初始化就算完成了,已经迫不及待的想打开看看自己搭建博客的样子,测试一下吧,在命令行打开服务测试一下效果

hexo server

打开浏览器,输入站点的默认端口http://localhost:4000

Markdown

到此,一个本地的博客初始化就算完成啦!

3. 推送到GitHub

​ 本地的博客搭建好啦,但只能自己玩单机给自己嗨。这时候就需要用GitHub page提供的免费空间来存储我们的博客了。

3.1 创建GitHub仓库

​ GitHub提供了免费的空间给我们存放站点,那自然是要在GitHub上创建一个仓库,仓库等名字不能乱取,为了让GitHub知道这不是一个普通的仓库,而是作为GitHub page的站点仓库,就必须采用固定的命名方式用户名.github.io。如Cloud-Wong.github.io

Markdown

建好以后主页大致就是这么一个样子。注意,左上角的命名规范!要严格按照用户名.github.io这么搞才行。

3.2 推送站点到GitHub上

仓库建好了,回到我们的命令行来。cd到我们初始化好的blog文件上。执行

vim _config.yml

滑到最后可以看到

deploy:
    type: git
    repository: https://
    branch: master

type如果不是git就改成git,repository这个参数代表了需要推送到的地址。回到刚刚新建好的GitHub仓库,复制

Markdown

然后粘贴到repository后面

修改后:

deploy:
    type: git
    repository: https://github.com/Cloud-Wong/Cloud-Wong.github.io.git
    branch: master

当然你如果不想在控制台用vim编译器修改,直接打开blog文件夹,找到_config.yml配置文件,拉到最后修改保存也可以。

⚠️注意:配置信息内到所有参数的冒号后面都要有一个空格!!!否则hexo命令会报错。

在blog文件夹下执行命令生成静态文件:

hexo g
此时若出现如下报错:
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
则执行命令:
npm install hexo --save
若无报错,自行忽略此步骤。

静态页面生成以后,就可以把整个站点推送到GitHub上了,执行

hexo d

如果说无法连接到git,执行npm install hexo-deployer-git --save,然后再次执行hexo generatehexo deploy命令。

成功连接后,就可以打开浏览器输入cloud-wong.github.io验证。你将会看到和之前在本地初始化一样的界面。

参考链接

参考博客:与佳期的个人博客

官方文档:

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

推荐阅读更多精彩内容