手把手教你搭建博客系统

如何快速搭建个人博客

最终效果请访问：https://kewenjie.github.io/

环境准备

首先要安装git（这一步小伙伴们自行去做）

一、注册Github账号（已注册可忽略）

打开这个网址，注册一个github的账号 https://github.com/join?source=header-home进行注册

二、创建repository仓库

如图：

特别说明：你的仓库的名字 格式为[username].github.io username 必须是github注册的用户名，否则无法访问

举个例子 本人注册的用户名是kewenjie 那么我的仓库名称为kewenjie.github.io

拉取仓库到本地并进行初始化

在本地编写index.html(内容随意)，提交到github上

主角登场-hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页

想要进一步了解hexo，请参考官方文档

由于hexo是由node进行构建，首先node环境安装

下载Node.js 官方地址：https://nodejs.org/en/download/选择相应的版本进行安装

安装完成后，查看是否安装成功，输入cmd

node -v 查看 node 版本
npm -v 查看 npm 版本

使用node安装hexo

node安装好之后，可以使用npm来安装hexo

npm install hexo-cli -g
hexo init blog(生成的博客文件夹的名字，自定义,会在对应执行该语句的路径生成对应的文件)
cd blog
npm install
hexo server（启动hexo）

最终效果如下：

输入地址http://localhost:4000就可以进入hexo的界面

hexo配置

hexo基本命令

这些命令，大部分都要在上一步创建好的blog目录下来执行

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
说明
hexo new "postName"   ##新建文章  
举例：hexo new "test"   这样就会到blog\source\_posts目录下生成一个test.md文件直接generate后deploy就可以在博客中展示
hexo new page "tags"	这样就会到blog\source\tags目录下生成一个index.md文件直接generate后deploy就可以在博客中展示

如何把博客发布到github

前面我们在本地通过http://localhost:4000可以访问到默认的博客站点，如果需要发布到外网访问，需要把代码上传到github对应站点的repository中。
通过hexo deploy 把生成好的静态页面发布到git，但是在此之前，需要配置目标github的地址

cd blog
vim _config.xml

找到deploy的配置项，增加如下配置。

deploy:
  type: git
  repository: git@github.com:2227324689/2227324689.github.io.git
  branch: master

接着执行hexo deploy，就能把页面提交到github。

如果出现下面这个错误，说明还需要安装一个插件，在根目录下执行npm install hexo-deployer-git --save 安装插件

Deployer not found: github 或者 Deployer not found: git

如何更新文章呢？

博客搭建好之后，最重要的就是要更新博客了.

使用命令来创建

进入到blog目录，执行hexo new 'blog-name' 来创建一个页面，在blog\source_post目录下就会生成一个blog-name.md文件

然后我们使用markdown的语法来写文章即可

创建页面完成后，进入到blog,

输入如下命令，就可以上传至github

hexo g
hexo d

可以通过访问 https://username.github.io就能查看到你更新的文章了

更新主题

如果你觉得默认的hexo的主题很丑怎么办？

hexo官方提供了非常多的主题：https://hexo.io/themes/，

例如我选择的主题是https://github.com/JoeyBling/hexo-theme-yilia-plus

你需要做的就是选择自己喜欢的主题，并且下载到本地。

把主题拷贝到 blog/themes目录下

修改_config.yml中的theme: landscape改为theme: hexo-theme-yilia-plus，然后执行hexo g来重新基于新的主题生成静态页面，然后hexo d即可。

题，并且下载到本地。

把主题拷贝到 blog/themes目录下

修改_config.yml中的theme: landscape改为theme: hexo-theme-yilia-plus，然后执行hexo g来重新基于新的主题生成静态页面，然后hexo d即可。

大家如果搭建过程中遇到了什么问题，可以联系我，我们一起探讨。