30分钟学会用Hexo搭建个人博客

前言

很早就想搭建自己的个人博客,就像刘未鹏 | Mind Hacks、廖雪峰的官方网站等大牛那样,能够将个人的学习、经验展现出来,是多么好玩且有意义的一件事情。
正在学习前端中,是时候试试搭建个人博客了。找了一份如何搭建博客的视频,抱着花费一个月时间把博客建立出来的觉悟。幸好,开始前,问了问琚老师搭建博客复杂程度,好更精确地估算所用时间。
琚老师提到了Hexo。
然后用近1小时来查找相关资料,又1小时竟然就将博客成功搭建起来咧,中间浪费了不少时间,如果你能只字不差地按照本教程操作,30分钟甚至更短时间内就可以学会如何用Hexo搭建个人博客了。
此教程不需要有任何编程基础,跟着步骤,只要能做到只字不差的阅读和操作,就能够搭建起属于你自己的个人博客。

一、Why:确立目标

先不要着急行动,在着手操作前,先停下来思考清楚你为什么想要搭建个人博客。
这很重要,经过认真思考过的清晰可行的目标是你成功实现结果的基石。

二、What:Hexo是什么

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
利用Hexo + Github Pages能够迅速搭建颜值爆表的个人博客,关键还是免费的哟。

三、How:具体步骤

1.安装Hexo

Hexo是基于Nodejs的博客系统,在安装Hexo之前需要安装Nodejs;是把博客搭建在免费的GitHub上,所以需要安装Git。

⑴安装Nodejs
Node.js的官网下载地址是:https://nodejs.org/
下载好之后,双击安装,一路Next即可

⑵安装Git for windows
Git for windows 的下载地址是:https://git-for-windows.github.io/
下载好后也同样是一路Next安装即可。

⑶安装Hexo
① 搭建好以上环境,打开Git Bash,执行命令:
npm install hexo-cli -g

② 初始化
进入你的博客目录,我的在E:/myblog 。点击右键,选择Git Bash Here。
然后在其中运行以下命令hexo init

30分钟学会用Hexo搭建个人博客_第1张图片
图1

接着,输入 npm install

图2

然后,运行hexo g

30分钟学会用Hexo搭建个人博客_第2张图片
图3

运行hexo s

图4

已经在本地成功的搭建了博客系统,可以去浏览器输入地址localhost:4000查看。

hexo init //初始化一个文件夹,它会为这个文件夹配置所有骨架
hexo g //即hexo generate,生成静态文件
hexo s //即hexo server,创建服务
hexo d //即hexo deploy,用于将本地文件发布到github上
hexo n //即hexo new,用于新建一篇文章

2.配置Git

目前为止,我们已成功在本地搭建了一个博客系统,现在将其部署到github上。

⑴ 在github上注册一个账号,创建一个新的仓库。

30分钟学会用Hexo搭建个人博客_第3张图片
图5
30分钟学会用Hexo搭建个人博客_第4张图片
图6

Repository name和自己的用户名相同。比如我的用户名为liming104,那么仓库名为liming104.github.io

⑵配置SSH
上传文件需要配置ssh key,不然无法上传。

设置name和emai:

git config --global user.name ""
git config --global user.email ""```

### 生成ssh密钥
`ssh-keygen -t rsa -C ""`
这一步在~/.ssh/下生成了两个文件id_rsa 和 id_rsa.pub

### 在Github上添加SSH密钥
打开上述的id_rsa.pub 文件,复制其内容,在https://github.com/settings/keys下 add new ssh key,

⑶将本地文件部署到Github
进入你的博客文件夹,找到并打开_config.yml文件,在底部修改 (Deployment部分)输入下面的代码

Deployment

Docs: https://hexo.io/docs/deployment.html

deploy:
type: git
repository: https://github.com/liming104/liming104.github.io
branch: master```
注意冒号(:)后都有一个空格。

⑷部署
配置好后,hexo g然后hexo d

30分钟学会用Hexo搭建个人博客_第5张图片
图7

有问题的话,通过npm install hexo-deployer-git --save解决。

之前的步骤如果没什么问题,我们在浏览器中访问https://liming104.github.io/ ,已经能够看到我们个人的博客了。

试着写一篇文章,《30分钟学会用Hexo搭建个人博客》。
我们的新建博客创建在E:\myblog\source_posts\hexo搭建博客系统.md,md后缀是markdown的文件格式。

hexo g >>创建静态文档
hexo s >>本地预览
hexo d >>上传github

从此以后,充分利用你专属的个人博客,记录你的成长轨迹,愉快地玩耍吧!

参考:
hexo搭建博客系统
在Github上搭建一个免费的Hexo博客系统

你可能感兴趣的:(30分钟学会用Hexo搭建个人博客)