引
早就想搭建自己的博客来记录点滴了,之前学习的过程中,笔记有记在有道云笔记上的,有直接用txt文档来记录的,还有写在作业部落的。现在整理起来真是无从下手。之前也用过CSDN和微信公众号,但CSDN是在有些丑,微信公众号编辑起来又太麻烦了,愁…
有幸在Github上逛的时候,打开了JingBin大神的博客,这样清爽简洁的风格一下子吸引了我,碰巧在他的博客中还记录里Hexo搭建个人博客的文章,碰巧我手里正好有公司配的Mac,碰巧工作不忙…于是我的个人博客搭建之路就开始了。
在此记录一下我在Mac中搭建博客的。感谢小马哥Mark和JingBin分享的教程和排雷经验,有些内容是直接从你们那里搬来的,忘博主见谅,如有侵权请联系我删除。
前期准备
准备工具
- Github账号,并创建一个置顶名字的远程仓库。
- Homebrew套件管理器
- Node,Git,Hexo
- NexT主题配置
1.Github上创建远程仓库
首先要在Github上创建一个新的指定命名的远程仓库(当然没有账号要先注册啦)
- 远程仓库命名规则:
username.github.io
例如:
按照如图所示的方式创建Repository,点击绿色的Create repository创建仓库就完成了。
注意不要勾选Initalze this repository with a README
用README初始化仓库可能会影响后面的流程。
注意username要替换成自己Github的账户名。
2.使用Git Pages配置远程仓库
在不购买服务器的前提下,我们的网站需要挂在GitHub Pages上。GitHub Pages是面向用户、组织和项目开放的公共静态页面搭建托管服务,可用于搭建个人博客。
进入GitHub Pages里面有帮助文档,一步步做,完成后就能在浏览器打开http://username.github.io了。
看到这个界面就说明项目站点已经配置成功了,接下来就是Hexo
大显身手的时候了。
注意:如果你http://username.github.io首页就要是博客首页的话,建议初次配置选择首页,就是这样。完成后可以把index.html给删了,因为到最后你发现那是没用的,它将会给你造成干扰。
3.安装Node.js、Hexo
测试安装状态1
2
3
4
5$ node -v
v4.2.4
$ npm -v
2.14.12
$ hexo -v
- 首先安装Homebrew套件管理器
Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径的情况,十分方便快捷。
安装Homebrew需要Mac已经安装了Xcode。在有Xcode的情况下,在terminal终端输入以下命令安装:1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
就可以自动完成该工具的安装,如果这条命令失效了,可能是Homebrew更新了安装方式,可以去这里查看最新安装命令以及Homebrew的简要介绍。Homebrew安装完成之后,安装git和node.js简直简单的不要不要的。
安装Git版本管理工具
终端命令:1
bew install git
安装node.js
1
brew install node
现在铺垫都已经做完了,来测试一下吧:
Ok,接下来该主角登场了。
- 安装Hexo
1
npm install -g hexo
配置Hexo
Hexo的中文文档
Hexo安装完成后,就可以用Hexo常用命令来配置个人博客了。
- 首先在任意位置创建一个文件夹,这个文件夹就是你存放本地博客的地方了。
- 然后在终端cd到你创建的文件夹下,然后执行以下命令:
1
2hexo init
npm install
这样Hexo会在该文件夹创建本地所需的一切资源。本地博客的文件夹目录如下:1
2
3
4
5
6
7
8.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
这样本地博客就搭建好了。
- 接下来测试一下本地博客:
1
hexo s --debug //启动hexo服务器,默认localhost:4000访问,可以看到调试信息
这样就开启了一个本地博客服务器,打开浏览器,在地址栏输入localhost:4000,就可以查看本地博客了,hexo默认生成了一片hello world博客。出现问题可以看terminal终端错误信息。按control + c
关闭调试。
1 | 注意:以上hexo开头的命令,执行目录必须是你创建的博客文件夹目录。使用hexo s 也可以,只是没有了调试信息。 |
- 本地博客没问题之后,接下来就是把本地博客发布到github仓库。这样别人就可以访问了。
在terminal终端,将当前目录切换到你的本地博客目录,执行以下命令:1
npm install hexo-deployer-git --save
安装完成之后,打开本地博客目录的_config.yml文件,编辑其中的deploy节点:
1 | deploy: |
注意:字段前需加空格,hexo有严格的格式规范。
- 发布到github远程仓库
通过Hexo常用命令1
2
3hexo clean // clean本地项目,防止缓存
hexo g // 根据你编辑的md格式的博客,生成静态网页
hexo d // 将本地博客发布到github
然后,在浏览器地址栏输入username.github.io就可以访问你的博客了,别人也可以通过这个地址访问你的博客。如果错误请重复看以前流程,或参考其他文章,也可以联系JingBin大神
记录几个常用的Hexo命令:1
2
3
4
5
6
7
8
9hexo init //在指定目录执行该命令,会将当前目录初始化为hexo站点,生成hexo站点所需的一切文件
hexo new “my new blog title” //新建一篇文章。如果没有设置 layout 的话,默认使用 _config.yml 中的
hexo new page <pagename> //新建一个网页。生成网页后的路径会在终端中有提示
default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。
hexo clean // 清除缓存,如果对本地文件做了修改,同步到远程验证修改的效果之前,先clean,清除缓存
hexo generate // 可以简写成hexo g 根据markdown文件生成静态文件
hexo server // 或者简写成hexo s 启动本地hexo 服务器,默认localhost:4000可以访问
hexo deploy // 或者简写成hexo d 将本地修改,部署到远端
hexo version // 显示hexo版本
NexT主题配置
请看官方文档
官方文档很详细,我就不再赘述了。
优化
给博客添加tag和分类
使用命令新建一个博客文章时,会看到顶部有一段自动生成的文本:
其中tags
用来指定文章的标签,categories
用来指定文章的分类。
接下来配置博客的标签页和分类页,输入如下命令:1
hexo new page tags //新建tags网页
注意:tags名与_config.yml配置文件下的
一致。
这样就新建了tags标签网页,可以在本地站点文件下source下看到:
其中tags
就是我刚刚新建的网页。其他的如about
、categories
都是通过这种方式建立的,_posts文件夹下保存着hexo new <文章名>
命令新建的文章。
在本地测试一下,如果没问题后就可以通过如下命令发布到github远程仓库了。1
2
3hexo clean
hexo g
hexo d
最后来看一下效果:
大功告成。
详细的配置请看NexT的官方文档
总结
好了,我的第一篇真正的在自己的博客中发布的文章就正式结束了,强烈建议看到这篇文章的人还是参考[JingBin]和[小马哥]的搭建文章,两位大神写的更加权威,参考性更强。
最后希望自己不忘初心,有了自己的博客之后一定要坚持写自己学习的点点滴滴。技术没有屏障,学习没有止境。守得云开见月明…