Mac 系统下搭建hexo个人博客

96
lxmic
0.7 2018.08.19 11:47 字数 2154
Mac-20180819.jpeg

1. 前言

不久前买了17款的MacBook Pro,全新的电脑,我想在这个上面管理我的个人博客,所以我要继续搭建这样一个环境,说起来我也应该是老手了,我在2月份的时候已经在我的Linux上面搭建了环境,可以的是,我的Linux被我系统重装了,磁盘全部清空,我没有办法继续来更新我的博客。这件事我已经想了好久,因为第一次的搭建,让我有些阴影,花了我好多的时间,太可怕。这次回家,我打算攻克这个问题,并且记录下来,所以有了这篇笔记。首先,需要的是把环境搭建好,这个是比较简单的,关键的是后期的博客修饰,要将其看起来很舒服,美观大气,简洁明了。那么开始吧......

2. hexo博客系统搭建

如果不知道hexo是个什么东西,那就去百度一下吧,我也没法说清楚,我们可以使用它就可以了。可以去看官方的文档,说得很详细,简单的说就是一个博客框架。

2.1 Github账号注册及仓库创建

太多概念需要普及一下,如果是完全零基础的小伙伴,我这里也没办法,我也讲不了多少,我这里就只讲实战了,而不普及理论知识了,用到的时候去Google一下吧,基本没有什么问题。

  • 进入Github官网,注册账号
    账号注册页面,都是一般的流程,看着填写就可以
注册号之后的页面
点击new仓库
  • 创建仓库的名字必须为username.github.io,我的用户名为Lxmic,因此我创建的仓库就是Lxmic.github.io,这是很关键的一点,很重要。输入名字后,直接点最下面绿色的按钮,创建新仓库。这一部分基本完成了,接下去需要在终端操作。
    输入仓库的名字

2.2 环境配置

参考官网文档

  • 安装Git、Node.js和hexo
# 首先检查时候安装了git和node.js,终端输入一下命令,
node -v #是否出现安装版本信息,出现说明已经安装了
git --version #同上述情况
# 如果没有安装,则进行安装,都可以通过直接下载安装测序进行安装,这里不演示,提供下载网址:
[git]: https://sourceforge.net/projects/git-osx-installer/
[node.js]: https://nodejs.org/en/

  • 如果已经安装好了上述的软件,那么可以安装hexo,然后等待安装成功即可。
npm install -g hexo-cli
  • 创建blog文件夹,并初始化建立博客框架
# 在你的家目录下创建一个blog文件夹
mkdir blog
# 进入目录
cd blog
# 初始化目录
hexo init
开启本地服务 
# hexo s

出现以下信息,说明你可以本地访问博客系统,在浏览器输入4000这个网址,就可以看到博客首页。


image.png
到这里说明你的环境以及没有问题了,成功了搭建起了博客框架

2.3 博客关联到Github仓库

在第一步的时候,我们已经将仓库创建好了,这里就需要用到了。

  • 首先我们要编辑图中_config.yml文件,这是博客的主要配置文件,在下面一部分,我们要频繁使用这个配置文件,这里先编辑一步,为了管理GitHub账号。
image.png
  • 打开文件之后,在文档最后,输入红色大框中的内容,只需要将你的username替换就可以了,其他无需更改。


    image.png
  • 然后在目录中执行

# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d

然后你需要输入你GitHub的用户名和密码,这样你就就可以使用你的仓库名去访问你的博客主页了。为了每一次部署不必一种输入密码,我们可以生成秘钥,然后提交到GitHub,进行关联,那么你下次就不需要再输入密码了。

关联成功,这里我是购买了自己的域名,所以显示的是域名,域名关联在后面讲,这里先忽略
  • 关联GitHub账号,免密提交
# 用你注册GitHub时的邮箱号,进行秘钥生成
cd ~
ssh-keygen -t rsa -C "xxxxxxx@qq.com"
# 系统就会生成一个隐藏文件夹.ssh
cd .ssh
ls
# 复制公钥
vim id_rsa.pub

点击箭头的按钮,进入设置,然后点击SSH and GPG keys,创建新的SSH,将之前复制的公钥黏贴,提交,OK。


进入settings
image.png
image.png

2.4 博客基本使用

  • 创建新的文章
hexo new "djy"
执行之后,就会在下面的目录里自动创建djy.md的markdown文件,然后你就可以输入内容
  • 编辑markdown文件,可以使用markdown神器typora。可以看到markdown文件,里面自动生成了题目和时间,还可以写标签,这些我们先不去修改,这些是yaml内容,一般不去修改,修改不好会报错。我们直接在下面编辑一些内容。
  • 发布文章至博客
hexo g
hexo d

如果运行加过是这样的结果,那么你的博客发布成功了,以后每次只要这么进行就可以更新你的博客了。


image.png
我写的内容,可以在博客上发布了,成功

3. Hexo博客美化及功能增添

3.1 选主题

  • Hexo官网:https://hexo.io/themes/,里面有特别多的主题可以选择,我在这里选的是next这个主题。下载主题:
cd ~/blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 修改站点配置文件:_config.yml,将里面76行的theme由landscape修改为next
    image.png
  • 更换新的主题,可能会有一些延迟


    image.png

3.2 通过站点配置文件修改网站细节

需要修改的内容可以参考网站:https://hexo.io/zh-cn/docs/configuration,里面对各个参数有一些详细的解释,我这里修改一些博客的标题,副标题,描述,语言等。
这里我想说的是,一般你修改一项,重新部署网站一下,因为一旦出错,就比较容易找到原因。

网站配置说明
只修改这些
修改后的博客,字体变成了中文,有了标题和副标题

3.3 主题文件修改博客内容

  • 关键也是同样名字的配置文件:_config.yml,看一下里面的内容。
    image.png
开始是一些描述性的内容
  • 修改整个主题,不需要的用#注释掉,这里我已经将默认的Muse注释掉,改为mist


    image.png
  • 将menu也修改,没来只有首页和归档,限制添加标签和分类,只需要去掉前面的#,现在来看一下效果。


    image.png
效果
  • 需要新建一个分类和标签页面


    找不到页面
cd ~/blog
hexo new page categories
hexo new page tags
添加分类类型
添加标签类型

效果如下:

出现标签页面
  • 设置头像


    头像设置,参考next官网
设置完之后的头像
  • 设置侧边栏的社交连接
next官网
设置后的效果
  • 设置disqus评论功能,你只需要将站点配置文件disqus_shortname中设置你shortname,并在主题配置文件中开启disqus功能为true。
    image.png
开启评论后的效果
  • 设置本地搜索功能,只需要主题配置文件将local search 改成true,并且需要修改站点配置文件,在extensions下面,添加内容如下:
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
image.png
搜索的效果
  • 设置阅读全文按钮,有时候文章有很多,你没有办法都是全文显示,会显得特别混乱,因此我们只要显示一部分内容。将主题配置文件中auto_excerpt开启,然后更新,就完全OK了。
image.png
  • 设置打赏功能,不管有没有人,设置一下这个功能还是挺好的。
image.png
打赏功能已经开启
  • 修改文章内链接文本样式,你如果不想要下划线,那么可以把里面的border-bottom这4行代码都修改为none
image.png

参考文章:https://www.jianshu.com/p/3a05351a37dc

image.png
  • 设置网站缩略图标,将small、medium、apple_touch_icon这三行,都设置成一样的图片地址

参考文章:https://www.jianshu.com/p/3a05351a37dc

image.png
这就是我选择的图标
  • 添加网站访问量

参考文章:https://www.jianshu.com/p/3a05351a37dc

完全是别人的东西,直接跟着尝试

效果如下:


image.png
  • 添加版权信息

参考文章:http://stevenshi.me/2017/05/26/hexo-add-copyright/

版权
  • 新创建的文章自动添加分类
    在blog主目录下,编辑post.md,添加categories:就可以在创建的博客中生成。
image.png

4. 结语

花了一天半的时间,终于完成了博客的搭建,完全恢复到了之前的状态,这样就行了。网上有太多资料了,看都看不过来,很不错,下面列出我参考过的。终于把这件事给做完了,从二月份拖到了现在,真是拖延到无穷无尽。最后附上我博客的地址,会不定期更新。
Lxmic Blog: https://othlis.com/

参考文章
https://www.jianshu.com/p/3a05351a37dc
https://www.jianshu.com/p/344cf061598d
https://www.jianshu.com/p/d335569a6238
http://stevenshi.me/about/
https://www.jianshu.com/p/9f0e90cc32c2
https://www.jianshu.com/p/49c8168c7418
https://www.jianshu.com/p/cfdfcef680cc
https://zhuanlan.zhihu.com/p/30836436
https://theme-next.iissnan.com/theme-settings.html
https://www.jianshu.com/p/2fe658fd9d94
https://blog.csdn.net/qw8880000/article/details/80235648
https://blog.csdn.net/weixin_39345384/article/details/80544660
https://linlif.github.io/2017/05/27/Hexo%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5-%E6%B7%BB%E5%8A%A0%E5%88%86%E7%B1%BB%E5%8F%8A%E6%A0%87%E7%AD%BE/

学习记录
Web note ad 1