Mysterious-X Blog

积跬步以至千里！

记录：从零开始 搭建属于自己的blog

发表于 置顶 | 更新于 分类于 ， ，   阅读次数：
本文字数： 4.3k 阅读时长 ≈ 4 分钟

图片001

前言

为什么要自己搭建博客?
你看技术大神们哪个没有自己的优秀博客
通过做笔记的方式对学习历程进行记录，对所学的知识形成⽂章也是对⾃⼰的交代
不懂技术的小伙伴也可以在自己的小天地写文，很爽又很有逼格是不是~

用知乎、CSDN、博客园、简书等站点进行写作不行吗？
当然没问题啊，但是自行建站，一切都可以自己定制，毫无限制，你的地盘你做主
拥有属于自己的独立博客 自由，自在~
可以看看这篇文章：刘未鹏 | Mind Hacks
更多请看 为什么要自建博客？

本站是通过Github托管+Hexo博客框架+Next主题搭建而来的
GitHub：一个静态站点托管服务+提供.github.io免费域名
Hexo：一个高效的博客框架
NexT：一个简约风格的网站主题

Github+hexo搭建个人博客的相关的教程网上有很多，但每位技术大神都写的不太一样(还有受不同环境或版本的影响…)，所以我决定将我搭建的首个博客过程写下来记录一下，包括我亲身踩过的一些坑orz…希望给和我一样的技术小白提供一些帮助。
最后，感谢互联网中提供帮助的各路大神。

搭建步骤概览

  1. 第一部分 Github的安装及相关配置
    • 注册Github账号
    • 创建Repository #仓库
    • 安装Git
    • 将Git与GitHub账号绑定
  2. 第二部分 搭建Hexo博客 安装及相关配置
    • 安装Node.js #依赖环境
    • 安装Hexo框架
    • 将博客部署到github.io #发布网站

Github的安装及相关配置

注册Github账号

由于网站是托管在Github上的，所以首先需要创建Github的账户
访问Github官网 右上角Sign up开始创建

创建Repository #仓库

注册好Github账户后，继续创建用于托管网站的仓库，按目前的Github网页排版可点击
New、Start a project、New repository这三个位置进行仓库的创建
图1
Repository 仓库名字的格式应该是 username.github.io 也就是你创建好博客后的域名
其中username保持与注册用户名一致
例如我的username是mysterious-X 仓库名则为mysterious-X.github.io
图2
其余选项可以按需，博主是全部保持的默认，
最后下拉到底，点击Creat repository完成仓库创建

安装Git

Git是什么？参照廖雪峰老师博客中的说法，Git是目前 主流的、开源的分布式版本控制系统，尤其是2008年，GitHub网站上线了，它为开源项目免费提供Git存储，无数开源项目开始迁移至GitHub，包括jQuery，PHP，Ruby等等。更多详细介绍可移步至此 Git的诞生
最简单的理解就是网站在本地搭建好后，需要使用Git同步到GitHub上进行托管及上线
很多博主在搭建时都推荐了廖雪峰老师的Git教程 其中包括了linux、Mac OS、Windows的安装教程。
本站是通过windows系统搭建的，但无奈廖老师windows部分的教程选择的是默认安装…
而我又对众多的选项非常好奇，本着求知欲，所以又多找了几份关于Windows系统的，带图带翻译和详细步骤讲解的安装教程，可以对比着看看。
Git 详细安装教程1
Git 详细安装教程2
Git官方windows版下载传送门→Git Download for Windows

将Git与GitHub帐号绑定

Git安装完成后在桌面任意位置右键菜单点击Git Bash here或者在菜单里搜索Git Bash并打开
设置user.name和user.email配置信息：

1
git config --global user.name GitHub用户名

#输入你实际的github注册用户名

1
git config --global user.email GitHub注册邮箱

#输入你实际的github注册邮箱

生成SSH Key 密钥

1
ssh-keygen -t rsa -C GitHub注册邮箱

#输入你实际的github注册邮箱

然后直接一键三连(三次回车)，默认不需要设置密码
最后看到这样的界面，就成功生成ssh key了
图3

配置 SSH key 密钥

配置 SSH key 用来将本地git项目与github联系
找到生成 .ssh 密钥的文件夹(如上图中标记位置查看自己的，每个人的路径都不一样)，
将文件夹内名为id_rsa.pub的密钥内的全部内容复制，
#没找到的勾选一下文件扩展名 隐藏的项目
复制完后打开GitHub_Settings_keys页面，
#如链接失效，也可在github上点右上角头像下拉菜单 -> 点击Settings -> 左侧列表中点开SSH and GPG keys -> 点击New SSH key
图4
图5
Title：可以任意填写，我写的是myBlog
Key：将刚刚复制的id_rsa.pub密钥内容粘贴至此
点击Add SSH key完成
最后在Git Bash中检测GitHub公钥设置是否成功，
输入以下代码 不要改任何一个字 

1
ssh git@github.com

图6
如上则说明本机已成功连接到Github。
这里之所以设置GitHub密钥原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在GitHub上，私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟GitHub上面的公钥是否是配对的，若是匹配就认为你是合法用户，则允许推送。这样可以保证每次的推送都是正确合法的。

搭建Hexo博客 安装及相关配置

安装Node.js #依赖环境

Hexo基于Node.js，会包含环境变量及npm的安装，下载Node.js 安装包并安装，此处安装我选择的全部保持默认选项，默认安装即可。
安装后检测Node.js及npm是否安装成功，在命令行中输入 

1
2
node -v
npm -v

#安装完成Node.js环境后一定要记得重新开一个git bash窗口，之前开过的窗口是敲不出node和npm版本的
图7
如返回值如上，则Hexo的环境已全部搭建完毕。

安装Hexo框架

环境准备好后，开始安装Hexo
Hexo是个人博客网站的框架， 首先需要在自己的电脑里创建一个文件夹，例如D:\myblog\mysterious-X.github.io\
Hexo框架与以后你自己发布的网页都在这个文件夹中
此文件夹的名字博主是填写的自己的Repository仓库名

#博主在之后访问搭建好的页面时，遇到了github.io页面404报错
重新搭建了环境并使 Github用户名、Repository仓库名、本地文件夹名 保持一致后解决的
所以如果是跟博主一样的新手的话，第一次搭建时可以保守起见，
将Github用户名、Repository仓库名、本地文件夹名 保持一致
相关资料可参考：
https://blog.csdn.net/dajian790626/article/details/78595684
http://www.jianshu.com/p/380290deb8f0

创建好后，直接在该文件夹上右击Git Bash Here
或进入文件夹内，空白地方右击鼠标点击Git Bash Here
提示：在进行博客搭建或之后进行优化修改工作时，每次使用命令都要在此目录下进行。
使用npm命令安装Hexo

1
npm install -g hexo-cli

安装完成后，初始化博客

1
hexo init blog

现在已经搭建好本地的 Hexo 博客了，为了检测我们的网站雏形
分别按顺序输入以下三条命令：

1
2
3
hexo new test_my_site
hexo g
hexo s

三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。
完成后，打开浏览器输入地址：

1
localhost:4000

这样我们就可以看到已经搭建好本地的博客了

常用的Hexo 命令
hexo init #初始化博客
hexo n 文章标题 #新建文章 hexo new 的简写
hexo g #生成 hexo generate 的简写
hexo s #启动服务预览 hexo server 的简写
hexo d #部署 hexo deploy 的简写
hexo clean #清除缓存，若网页正常情况下可忽略这条命令
之后每次修改配置文件或新建文章后都需要重新生成一下和部署到github上

将博客部署到github.io #发布网站

上步中已经完成了站点的本地预览，接下来要做的就是将网站进行发布，这样可以让更多的人阅读到
在hexo框架中最主要的配置文件_config.yml也被称之为站点配置文件，
之后的一些站点配置和优化都会用到此文件。
图8
编辑站点配置文件，可以使用nodepad++打开
翻到末尾，找到deploy开头的地方，进行如下修改：

1
2
3
4
deploy:
type: git
repo: 这里填入你之前在GitHub上创建仓库的SSH
branch: master

repo的地址：进入 Github 个人主页中，点右上角头像中的Repositories，点进之前新建的项目中，点击code，复制新建的独立博客项目的 SSH 码，复制粘贴至站点文件repo: 的后面
一定要注意语法，要用英文符号的：，所有的 ： 后面必须加一个空格，不然会报错。
图9
图10
修改完后保存退出。

最后安装Git部署插件

1
npm install hexo-deployer-git --save

此步是为了给hexo d·这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置
安装完成后依次输入以下命令

1
2
hexo g 
hexo d

完成后，打开浏览器，在地址栏输入你的放置个人网站的仓库路径，即 http://xxxx.github.io
比如我的xxxx就是我的GitHub用户名: mysterious-x.github.io
如果你发现你的博客与博主一样已经上线了，可以在网络上被访问到了。
那么….
恭喜你~！你的博客已经搭建好啦！

至此，我的首个博客基础搭建部分就算完毕了，后续只需要通过一些简单的Markdown语法就可以快速生成一篇博客了。

附：
初识Markdown语法
Markdown也是现在各博客平台比较主流的编辑语法，入门只要3-5分钟。
教程也是网上一抓一大把，在此我推荐几篇我个人认为比较简洁明了的，非常之好上手。
传送门1~ -> 简书-Markdown基本语法
传送门2~ -> 菜鸟教程-Markdown 教程
传送门3~ -> CSDN-Markdown语法介绍

后续会对博客进行更多个性化的功能定制~
继续打造独一无二且只属于你的个性化博客~
详参下篇！~

参考文献
技术小白搭建个人博客 github+hexo
GitHub+Hexo 搭建个人网站详细教程
史上最浅显易懂的Git教程！

-------------本文结束---感谢您的阅读-------------