logo头像
从未如此简单有趣

Hexo+GitHub搭建个人博客

本文于1444天之前发表,文中内容可能已经过时。

前言

看惯了网上各式各样的博客,大家是不是也想有一个自己的博客,也希望搭建自己的博客平台,可是搭建博客除了需要了解前后端知识外,还需要有自己的服务器、域名、IP地址等,这些有些还需要付费,那有没有一种能快速搭建博客的方法了,基于大家都有搭建博客的需要,hexo就应运而生了,并且已经开源,其地址是:hexojs/hexo,hexo的作者是台湾人,所以在中文支持上做的很好。需要了解更多可以去Hexo官网了解。下面从0到1讲解如何快速搭建属于自己的博客。

什么是Hexo

Hexo是一个轻量级的博客,使用Markdown解析文章。上传到后台的是静态的网页,因而加载速度快。通过博客记录日常学习及生活,充实自己的人生。

搭建步骤

  • GitHub创建个人仓库(国内可以使用Gitee)
  • 安装Git、Node.js等工具
  • 安装Hexo
  • 上传网站
  • 获得个人网站域名、绑定域名(有自己域名的可以尝试,不是必须的)
  • 自由切换主题
  • 编写MarkDown文档
  • 生成、发布文章
  • 添加图片等多媒体
  • 个性化设置

GitHub创建个人仓库

登录GitHub注册申请一个GitHub账号,有邮箱即可注册,十分的方便。在注册完成后,会发一个验证码到你邮箱上,输入验证码后即可激活GitHub,之后点击New repository创建一个新仓库,仓库名称应为:用户名.github.io,这是固定写法。

安装Git

Git是开源的分布式版本控制系统,用于高效地处理项目,若想了解更多Git细节可以看看廖雪峰老师的Git教程,下载安装Git,然后在命令行中输入git --version看看是否已安装成功,安装成功后即可配置user.name和user.email信息:

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh秘钥文件

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后按三个回车,默认不需要输入密码。
然后找到生成的.ssh文件夹,id_rsa.pub秘钥,将内容全部复制。打开SSH Key/Add new随便输入一个易于记住的Title,然后将内容黏贴到Key输入框中,最后点击Add SSH key。
可以在终端检测GitHub公钥设置是否成功,输入ssh git@github.com能看到successfully字样就标明添加成功。

安装Node.js

Hexo是基于Node.js,Node.js下载地址:Node.js下载安装包,注意安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js是否安装成功,在命令行中输入 node -v 看是否输出了Node.js的版本。在命令行中输入npm -v看是否输出了npm的版本。
到这里,安装Hexo的环境就基本搭建成功了。

安装Hexo

Hexo是一个编写个人博客网站的框架,新建一个文件夹,命名为blog,Hexo的框架及以后自己编写的博客都在这个文件夹中。创建好后,在终端下进入该文件夹,使用npm命令安装Hexo,输入:

npm install -g hexo-cli

安装时间较长耐心等待,安装完成后,初始化博客:

hexo init blog

注意上面的命令都需要在之前创建的blog文件夹中,下面可以检测博客网站是否工作正常了。

hexo new "myBlog"
hexo g
hexo s

执行万后,打开浏览器输入地址:localhost:4000
可以看出我们写的第一篇博客。

常用Hexo命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

# 命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

上传网站

进入根目录里的themes文件夹,里面也有个_config.yml文件,即主题文件。下面将本地的hexo博客与GitHub文件关联起来,打开本地的配置:_config.yml,翻到最后修改为:
deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的完整路径,记得加上 .git
branch: master
保存配置后,执行hexo d做相应的部署,我们部署是希望部署在我们的GitHub仓库里,最后安装Git部署插件:

npm install hexo-deployer-git --save

之后再输入三条命令:

hexo clean
hexo g
hexo d

完成后,打开浏览器,在地址栏输入我们的个人网站仓库地址。用户名.github.io 这时你就会发现你的博客已经上线了,可以在网络上被访问了。

获得个人网站域名、绑定域名

获取域名

域名是网站的入口,也是网站的第一印象,比如饿了么的官网的域名是:https://www.ele.me/ ,很是巧妙。常见的有com,cn,net,org等后缀,也有小众的xyz,me,io等后缀,根据你自己的喜好,选择不同的后缀,比如我选择就是常见的com后缀。很多小众奇特的后缀在大陆是没办法备案的,网站也就无法上线。然而使用GitHub托管我们的网站,完全不需要备案,因为托管我们的网站内容的服务器在美国,而且在国内备案流程也比较繁杂,时间需要一周左右。

申请域名的地方有很多,这里推荐阿里云:阿里云-为了无法计算的价值 申请入口:域名注册 购买域名这也是我们整个搭建过程中惟一一个需要花钱的地方。如果你已经有了空闲域名就无需购买,直接使用即可。

绑定域名

虽然在Internet上可以访问我们的网站,但是网址是GitHub提供的:http://xxxx.github.io (知乎排版可能会出现”http://“字样) 而我们想使用我们自己的个性化域名,这就需要绑定我们自己的域名。这里演示的是在阿里云万网的域名绑定,在国内主流的域名代理厂商也就阿里云和腾讯云。登录到阿里云,进入管理控制台的域名列表,找到你的个性化域名,进入解析,然后添加解析,之后保存。第二步,登录GitHub,进入之前的仓库,点击Settings,设置Custom domain,输入你的域名。点击save保存。第三步,进入本地博客文件夹,进入blog/source目录下,创建一个文本文件,输入域名,如果带有www,那么以后访问的时候必须带有www完整的域名才可以访问,但如果不带有www,以后访问的时候带不带www都可以访问。所以建议,不要带有www。这里我还是写了www(不建议带有www),保存,命名为CNAME,主要保存成所有文件不是txt文件。完成后,进入blog目录,在命令行下执行:

hexo clean
hexo g
hexo d

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。

自由切换主题

如果你不喜欢Hexo默认的主题,可以更换不同的主题,主题传送门:Themes 我自己使用的是Next主题,可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题,在blog目录中(就是命令行的位置处于blog目录)打开命令行输入:

git clone https://github.com/iissnan/hexo-theme-next themes/next

这是将Next主题下载到blog目录的themes主题下的next文件夹中。打开站点的_config.yml配置文件,修改主题为next
打开主题的_config.yml配置文件,不是站点主题文件,找到Scheme Settings.
next主题有三个样式,可以用Pisces,选择你自己喜欢的样式(只需要把行首的#去除,#是注释),选择好后,再次部署网站,hexo g、hexo d,查看效果。选择其他主题,按照上述过程即可实现。

编写MarkDown文档

hexo是通过解析MarkDown生成静态网页的,文章编写都是通过markdown编写的。新建文章:hexo n "博客名字"就会在blog根目录下的source文件夹中的_post文件夹中多了一个博客名字.md文件,使用markdown编辑器打开,这里推荐马克飞象编辑器,就可以开始你的个人博客之旅了。

生成、发布文章

编写完成博客后,即可执行

hexo clean
hexo g
hexo d

进行生成部署文章了,之后就可以在浏览器观看你编写的博客了。

添加图片等多媒体

一般博客上面就会配几张图片,MarkDown是支持插入图片的,但是图片需要存储在网络上,这里可以放到你的GitHub上,但不推荐,一般都是放在网上公用的图床上,国内比较好的就是新浪博客和七牛云。在markdown中插入图片的方法:

![对图片的介绍](图片的网址或相对路径地址)

个性化设置

所谓的个性化设置就是根据个人需要添加不同的插件及功能。
基本的有:
在站点配置文件_config.yml修改基本的站点信息

title: Hexo+GitHub搭建个人博客
subtitle: Test
description: My Description
author: Tianyu
avatar: http://www.test.com/dfdf.jpg
language: zh-Hans
timezone: Asia/Shanghai
date: 2017-12-27 15:19:06
categories: Hexo
tags: Hexo搭建

依次是网站标题、副标题、网站描述、作者、网站头像外部链接、网站语言、时区、创建日期、分类、标签等。

进阶个性化

添加网易云音乐

  • 打开网页版网易云音乐,选择喜欢的音乐,点击生成外链播放器。快捷键:Win/Ctrl+F(Mac是:command+F)搜索生成外链
  • 复制外链的代码
    例如:
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=36990266&auto=1&height=66"></iframe>
    
  • 在策略插入这首歌的音乐播放器,修改themes/snippet/layout/_partial/_wdiget/friends.ejs 文件,添加刚刚复制的外链代码,放到最后面就行。然后重新hexo g && hexo s重新生成并部署后,打开浏览器看下效果。

    设置背景

    把你挑选的背景图片命名为:background.jpg,放在blog\themes\next\source\images里,在blog\themes\next\source\css_custom文件的custom.styl首部添加:
    body {
    background:url(/images/background.jpg);
    background-attachment: fixed;
    }
    
    还有更多的进阶个性化设置,如SEO、评论系统、个人头像、博客分享、订阅功能、High功能、404网页设置等,可以参看:
    主题配置 - NexT 使用文档

第三方服务集成 - NexT 使用文档

内置标签 - NexT 使用文档

档进阶设定 - NexT 使用文档

上一篇