Mac上搭建Hexo+Github博客
导语
为搭建Hexo博客,踩了不少的坑,终究是搭建成功了,记录一下.
之前买过香港主机,用wp建站,试过之后时不时会挂掉,咨询空间商,告诉说是主机IP受到大规模DDOS攻击,导致不能访问,往复几次,遂放弃.转向Github, 使用Github搭建博客也有好处,最直接的一点就是免费.话不多说,开始记录.
Mac上搭建基于GitHub的Hexo博客可分5步:
一 搭建Github仓库及域名解析
- 创建Github账号(Github官网),一定要验证邮箱(验证邮箱)
(这是我新注册的Github账号 用户名:ceshiblog
密码:y******84
邮箱:134****978@qq.com
) - 登录Github,右上角点+按钮,创建仓库New repository
- 进入Create a new repository页面,
- ①输入Repository name,要注意格式:
你的github用户名.github.io
,比如:ceshiblog.github.io
- ②输入Description描述,比如个人博客,对于描述随意填,也可以什么都不填,后面是可以改的,
- ③选择public
- ④点击 Create repository
- ①输入Repository name,要注意格式:
- 进入仓库页面 (我的仓库页面) ,点击setting
-
向下滚动,点击Change theme(设置主题),在选择主题页面,随意选个就行
- 主题选好后,稍等一分钟,等主题渲染完成,仓库建好了,对应的网站也就建好了 (https://ceshiblog.github.io)
-
绑定个人域名(关于域名的购买,自行百度,其实非常简单)(这一步可不做,就直接使用Github的二级域名就行)
- 在你创建完成Github仓库时,你就拥有了一个免费的Github二级域名,但现在我们不想通过这个二级域名https://ceshiblog.github.io去访问个人博客,而是想通过个人域名来访问自己的博客,比如作者的个人域名 http://wxyass.com
- 下面详细步骤
- ① 进入仓库页面的设置(Settings)选项卡(作者的仓库页面 )
- ② 往下滑动,找到域名卡片(Custom domain),输入购买的域名(ceshiblog.xyz是作者在阿里云买的域名,第一年¥1元,续费每年¥69元,不续费不能用),然后保存
- ③ 保存成功的显示: Custom domain “ceshiblog.xyz” saved
- ④ 到域名商那里去域名解析(域名在哪里买的就到哪里去解析,作者去的是阿里云)
名词解释: 域名解析: 通过域名查找IP地址并访问空间的过程叫做域名解析. CNAME: 如果将域名指向一个域名,实现与被指向域名相同的访问效果,需要增加CNAME记录. @ : 将域名解析为example.com(不带www),填写@或者不填写; www : 将域名解析为www.example.com,填写www;
- ⑤ 等待10分钟解析完成,就可以通过个人域名(http://ceshiblog.xyz)访问博客网站了
- 此时网站已经建好,个人域名也绑定完毕,现在手动备份一份代码(若没绑定个人域名,这一步可不做)
因为在后面使用Hexo框架搭建博客时,初次部署会将个人域名覆盖掉,这里备份一下,后面重新上传就可以了
打开仓库页面(作者的仓库页面 ),
点击右侧绿底Clone or download,点击download zip,将代码下载到本地电脑(有3个文件,CNAME _config.yml index.md),主要是CNAME文件,保存即可. - 建站整理
仓库页面 : https://github.com/ceshiblog/ceshiblog.github.io 账号密码:github的登录账号
个人博客: https://ceshiblog.github.io(这是Github提供的免费二级域名) 或 http://ceshiblog.xyz(这是个人购买的域名,收费)
以上是Github仓库的搭建,接下来是Hexo框架的使用,对于新手来说发布博客的操作越简单越好.
而作者觉得使用hexo写博客就很简单,请往下看
二 Hexo关联Github
上面成功搭建Github仓库, 接下来这一块主要讲: 在本地Mac上搭建Hexo环境,并关联Github.
简单说: 通过Hexo在本地生成博客内容,再由hexo将内容提交的github上,最终形成相关博客
Hexo 是一个快速、简洁且高效的博客框架. Hexo官网文档
安装Hexo必须有两个先决条件
1. Node.js的安装
2. git的安装
2.1 下载Node.js和git并安装
软件 | 下载地址 | 解释 |
---|---|---|
Node.js | https://nodejs.org/en/ | 下载v6.9.2 LTS(当时最新) 一路安装即可 |
git | https://git-scm.com | 或到Hexo官网文档下载安装 |
2.2 安装Hexo,在mac终端命令行依次执行下面命令
步骤 | 命令 | 解释 |
---|---|---|
① | $ sudo npm install -g hexo |
打开终端,输入左侧命令,安装Hexo,需要输入管理员密码(Mac登录密码) |
同① | $ sudo npm install -g hexo-cli |
若上面命令出错的话,执行这一行命令(若正常,忽略此命令), 因为Hexo官网上的安装命令是$ npm install -g hexo-cli(这是在window上执行的命令), Mac安装时不要忘记前面加上sudo(如左),否则会因为权限问题报错 |
2.3 初始化Hexo本地文件夹,在mac终端命令行依次执行下面命令
步骤 | 命令 | 解释 |
---|---|---|
① | $ cd work/Blog |
终端cd到一个你选定的目录 |
② | $ hexo init yassblog.xyz |
初始化hexo文件夹,文件夹名称任意(作者的是yassblog.xyz) |
③ | $ cd yassblog.xyz |
终端cd到刚生成的hexo文件夹 |
④ | $ npm install |
安装npm |
⑤ | $ hexo s |
开启hexo服务器 |
此时, 浏览器中打开网址http://localhost:4000,能看到如下页面:
到这里本地hexo环境基本设置好了,可以去关联Github了
另外:按照2.3可以在本地初始化多个Hexo文件夹,当然创建多了也没啥用:
2.5 打开刚刚创建的本地Hexo文件夹(作者打开的的是work/Blog/yassblog.xyz).
2.6 找到_config.yml文件,用sublime Text打开(许多文本工具都能打开这个文件,也可以用命令vim打开)
2.7 打开后往下滑到最后,最下面3行补充修改成如下的样子:(最好手敲,不要copy,因为一些空格在复制时可能会被删除而导致后面的操作报错)
注意: type: repository: branch:这三个单词冒号后面的都有空格,实际_config.yml文件中的冒号后面都有空格
关于里面的repository后面要替换成自己的网址,去你的github仓库页面就能找到
2.8 通过终端命令进入本地Hexo文件夹(作者的是 $ cd work/Blog/yassblog.xyz)
2.9 执行生成静态页面命令 $ hexo generate
成功的显示界面:
① 若报错
-bash: $: command not found
应对执行
报错原因: 命令打错了或未安装Node.js 或未安装git 或未安装Hexo(参考作者上面内容 去下载安装)
安装完成后重新执行 $ hexo g
②若报错
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo —save’
应对执行
$ npm install hexo --save
重新执行 $ hexo g
2.10 再执行配置命令 $ hexo deploy
①若报错
ERROR Deployer not found: git
应对执行
$ npm install hexo-deployer-git --save
重新执行 $ hexo d
②若报错
FATAL remote: Permission to yassblog/yassblog.github.io.git denied to ywmblog.
应对
打开钥匙串访问(应用程序—>实用工具—>钥匙串访问)
左下方点击所有项目,右上方搜索 github.com
右击 github.com 后面不带括号的这条 删除该条记录
然后重新执行 $ hexo d
③接②若运行如下
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
On branch master
nothing to commit, working tree clean
Username for 'https://github.com':
应对执行
Username for 'https://github.com':xxx #输入xxx 你的github用户名
Password for 'https://yassblog@github.com':xxxx #输入xxxx 你的github密码
回车后需等待一段时间,成功显示如下
③若报错
Please tell me who you are
应对执行
$ git config --global user.email “108***960@qq.com”
$ git config --global user.name “yassblog”
其中: 108***960@qq.com 替换你的github邮箱(注意英文""标点)
yassblog 替换你的github用户名(注意英文""标点)
重新执行 $ hexo d
2.11 若你未关联Github,则执行$ hexo d
命令时终端会提示你输入Github的用户名和密码
Username for 'https://github.com':xxx xxx是你的github用户名
Password for 'https://yassblog@github.com':xxxx xxxx是你的github密码 回车后需等待一段时间
2.12 还可能让你输入管理员密码(mac登录密码),输入即可 (若没有要求输入密码则忽略这条)
2.13 命令$ hexo d
执行成功后,浏览器中打开Github二级域名https://yassblog.github.io(将yassblog换成你的用户名) ,能看到和打开http://localhost:4000时一样的页面。
到这里Hexo关联Github就完成了,接下来就是通过在本地电脑创建博客内容,再通过Hexo上传到Github远程站点上,这样博客网站的搭建基本完成,可能有人会问我在搭建仓库时,已经关联了个人域名,现在输入个人域名为什么打不开网页了, 而只能通过Github的二级域名https://yassblog.github.io 来访问博客,请先别着急,接着往下看,后面的后面会讲到的.
三 安装主题theme
上面分别完成了仓库搭建,Hexo关联Github,接下来的三,四节可跳过的,这两节主要用来美化的.
关于Hexo主题 ,网上已经有很多好看且成熟的成品, 你也可以到Hexo官方主题页搜索.
作者用的是Next主题 Next主题安装文档.安装备注: http://blog.csdn.net/zuoziji416/article/details/53204478
安装后,主题效果: next作者的博客 , 其中有评论,有分享,有阅读统计,非常实用.
四 绑定个人域名
若不想通过Github的二级域名https://yassblog.github.io来访问个人博客网站,而是希望通过自己的域名(如:http://yassblog.xyz)来访问,作如下操作:
- 找到之前1.8保存下来的代码(详情请看最上方第一节)
- 复制CNAME文件到
本地Hexo文件夹/public/
中(若没有public文件夹,先执行下一步,再执行这步) - 终端cd到本地Hexo文件夹(作者的是
$ cd work/Blog/yassblog.xyz
)后,依次执行下面3行命令:$ hexo g $ hexo d
- 到域名商那里,去域名解析(在第一节已经做了)
- 现在可以用个人域名访问博客了 比如作者的博客http://wxyass.com
- 可能执行命令去部署时,会有延迟,导致页面打不开,稍等会刷新就好了.
五 创建并发布博客文章
通过上面几步操作,博客网站已经搭建好了, 通过重复下面操作就可以源源不断的发布博客了
- 打开终端,通过终端命令进入本地Hexo文件夹(作者的是
$ cd work/Blog/yassblog.xyz
) -
执行如下命令新建文章:
$ hexo new "Hello Hexo"
文件名称为Hello Hexo.md的文件会建在目录/yassblog.xyz/source/_posts下。此时,你可以关闭终端命令行, 用Typora软件(或者Mou或者macdown等软件)打开Hello Hexo.md进行编辑. -
文章编辑完成保存后,打开终端,终端cd到yassblog.xyz文件夹下,依次执行如下命令来发布:
$ hexo g $ hexo d
- 至此,创建并发布一篇博客就完成了.
稍等会文章真正部署到远程站点上, 你就可以用个人域名访问博客了
PS :
如何全文阅读?
在文章的适当位置添加 <!--more-->
如何代码高亮?
主题配置文件_config.yml中修改
highlight_theme: night blue
使用的图床?
七牛云
六 结束语
博客终于搭建完成了