我的博客搭建全过程(1)

1.准备工作

在开始一切之前
1.1需要一个github账号,没有的话去注册一个;
1.2安装Git
1.3安装nodejs

2.创建github仓库

新建一个名为你的用户名.github.io的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是http://test.github.io了
创建github仓库
因为每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库,我之前已经创建过了。

3.配置SSH key

因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

1
$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

1
ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,记事本打开并复制里面的内容,打开你的github主页,进入个人设置->SSH and GPG keys->New SSH key;将刚复制的内容粘贴到key那里,title随便填,保存。

4.使用hexo搭建个人博客

4.1安装之前说几个注意事项:

1.很多命令既可以用Windows的cmd来完成,也可以使用git bash来完成,但是部分命令会有一些问题,为避免不必要的问题,建议全部使用git bash来执行;
2.hexo有2种_config.yml文件,一个是根目录下的全局的_config.yml,一个是各个theme下的;

4.2安装hexo

1
$ npm install -g hexo-cli

4.3创建博客文件夹

1
$ hexo init <你的文件夹名字> #如 hexo init thexwen

注意:他会在你命令当前路径下创建一个文件夹,这个文件夹将来就作为你存放代码的地方,所以最好不要随便放。

4.4初始化文件夹

1
2
$ cd <folder> #进入你的博客文件夹
$ npm install #初始化文件夹

初始化后,您的项目文件夹将如下所示:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes

4.5编写第一篇博客

1
$ hexo new "你的博客名称"

执行上面命令,在你的…\source_posts下会生产一个.md文件,打开文件就可以编写你的博客

4.6访问你的博客

1
2
$ hexo generate #生成静态文件
$ hexo server #启动本地服务器。默认情况下,该位置为http://localhost:4000/

执行上面两条命令,打开浏览器访问 http://localhost:4000 即可看到内容,第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑。
博客站点

5.部署到github

如果你一切都配置好了,发布上传很容易,一句命令就搞定,当然关键还是你要把所有东西配置好。
首先,ssh key肯定要配置好。
其次,配置_config.yml中有关deploy的部分

1
2
3
4
deploy:
type: git
repo: https://github.com/你的github名称/你的github名称.github.io.git #如https://github.com/TheXWen/thexwen.github.io.git
branch: master

另外我们还需要额外安装一个支持 Git 的部署插件,名字叫做 hexo-deployer-git,有了它我们才可以顺利将其部署到 GitHub 上面,如果不安装的话,在执行部署命令时会报如下错误:

1
Deployer not found: git

在项目目录下执行安装命令如下:

1
npm install hexo-deployer-git --save

安装成功之后,执行部署命令:

1
hexo deploy

这时候我们访问一下 GitHub Repository 同名的链接,比如我的 thexwen 博客的 Repository 名称取的是 thexwen.github.io,那我就访问 http://thexwen.github.io,这时候我们就可以看到跟本地一模一样的博客内容了。

6.配置站点信息

完成如上内容之后,实际上我们只完成了博客搭建的一小步,因为我们仅仅是把初始化的页面部署成功了,博客里面还没有设置任何有效的信息.
修改根目录下的 _config.yml 文件,找到 Site 区域,这里面可以配置站点标题 title、副标题 subtitle 等内容、关键字 keywords 等内容,比如我的就修改为如下内容:

1
2
3
4
5
6
7
8
# Site
title: xw's Blog #标题
subtitle: 记录,分享 #副标题
description: make an all-out effort #描述
keywords: "java,问题,个人" #关键字
author: xw #作者
language: zh-CN #中文
timezone: '' #时区

以上就是从零简单搭建一个 Hexo 博客的流程,希望对大家有帮助。

欢迎关注我的其它发布渠道