想要维护免费的个人网站，这篇文章就够了！
(由于时间问题，简单快速的写个流程。如果读者需要的话，则后续再增加更加详细的细节部分）
目录：
1、个人网站的展示
2、个人网站的搭建
1、个人网站的展示
效果图：
web.gif
web_mobile.gif
2、个人网站的搭建
步骤：
1、Github账号
2、Git、NodeJs、Hexo 安装
3、Theme主题的设计
步骤1、
1.1登陆GitHub 执行创建仓库（new Repository）
1.2填写的信息：
Repository name : yourGithubName.github.io
示例：pdliuw.github.io
1.3点击Create Repository 进行创建仓库
步骤2、
2.1：先安装Git请自行安装（如：已安装，请跳过此步骤）
2.2：再安装NodeJs 版本 > 6.9请自行安装（如：已安装，请跳过此步骤）
2.3：最后安装Hexo
Window用户：
$ npm install -g hexo-cli
Mac 用户：
$ sudo npm install -g hexo-cli
2.4：以上正常安装后，我们创建网站
[folder] 是你的网站的名称
$ hexo init [folder]
2.5：测试网站
$ hexo server
启动服务器。默认情况下，访问网址为： http://localhost:4000/
在浏览器中输入上述的网址，即可看到你的网站。
2.6：部署网站
修改配置（按照如图所示：进行更新配置）
image.png
|
image.png
|
|---|
配置信息描述：
title：网站标题
subtitle：网站子标题
description：网站描述
author：网站作者
language：网站的语言
url：你的网站的地址（把pdliuw替换为你在创建网站时填写的名称）
type：部署的类型（此处以git方式部署）
repo：你的网站的Github的地址
branch：你的Github的分支名称
安装自动化部署工具
$ npm install hexo-deployer-git --save
部署发布网站
$ hexo clean && hexo g && hexo d
如果是第一次发布的话，则终端需要Github 的邮箱和密码，按提示操作！
操作完成后可以访问你的网站了
示例：yourname.github.io
2.7：设计网站的Theme样式
默认情况下，网站会有一个默认的样式，如果你想自己选择一个样式应用到自己的网站的话，请继续往下看！
2.7.1、终端进入themes文件夹下，
2.7.3、
git clone https://github.com/blinkfox/hexo-theme-matery.git
2.7.4、
修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery
_config.yml 文件的其它修改建议:
- 请修改
_config.yml的url的值为你的网站主URL（如：http://xxx.github.io）。 - 建议修改两个
per_page的分页条数值为6的倍数，如：12、18等，这样文章列表在各个屏幕下都能较好的显示。 - 如果你是中文用户，则建议修改
language的值为zh-CN
2.7.5、 新建分类 categories 页
categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
2.7.6、新建标签 tags 页
tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
2.7.7、新建关于我 about 页
about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "about"
编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
2.7.8、新建友情连接 friends 页（可选的）
friends 页是用来展示友情连接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：
hexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：
---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---
同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬，只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
"url": "https://blinkfox.github.io/",
"title": "前去学习"
}, {
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "ttps://me.csdn.net/jlh912008548",
"title": "前去学习"
}]
2.7.9、
如果要修改更多信息：
请查看网站下的Themes下的hexo-theme-matery下的_config.yml文件修改配置信息
请替换hexo-theme-matery下的source中的文件资源以替换成你自己的网站的资源
完成上述所有步骤后，效果如下：
web.gif
web_mobile.gif
注意：
1、如果在运行命令时出现“权限拒绝导致的错误问题”，
解决办法为修改：在Window上，请以管理员身份运行终端；在Mac上，请在命令前加sudo 后并按照提示操作。
未完待续。。。
网友评论