避开所有的坑，如何不用服务器0基础搭建自己的个人博客？（一）

为了加深自己对于web开发的理解，决定开发一个自己的博客网站。

说干就干，前两天在w3school浏览了一遍HTML、CSS和一些建立网站所需要的知识。然后就开始了，花了两天踩了一遍坑，总算搭好了。

现在将我从0到建好，遇到的坑以及思考的过程记录下来，希望对自己和想要搭建自己的网站的同学有帮助。也希望能只看我这篇文章，就能建好你的网站。

好，我们开始。

本人配置：64位windows10，其它系统配置的同学可参考，但可能会有些许不同。

一、搭建一个博客网站，首先我们需要问自己：它需要什么功能？

1、个人首页
2、可以发文章
3、可以被访问
4、可以点赞、评论
5、可以注册、登录
6、可以关注
7、后续可拓展的功能

好了，我们现在知道了我们具体需要的功能了。

二、将想法架构为实际项目

逻辑梳理（实现方法）：
1、建立一个自己的本地个人网站
2、将GitHub作为自己网站的服务器（服务器托管）
3、将自己的本地网站部署到自己的GitHub托管的服务器上

三、步骤目录

一、准备工作
1.安装Git（软件）
2.安装NodeJs（软件）
3.安装hexo
4.注册、登录github
5.新建repository
6.新建个人网站文件夹（你将拥有一个本地网站！）
7.生成SSH密匙并添加至github

二、项目部署

（坚持到这，你已经拥有了一个人人可访问的自己的网站了！）

三、主题配置

四、添加功能
1.修改及配置主题
2.添加写文章功能
3.添加用户注册登录功能
4.添加评论功能
5.添加关注功能
6.添加搜索功能
7.更多功能，请期待

至此，你已经拥有了一个功能完备的个人网站！

四、详细步骤

1、建立自己的本地网站

安装前：最好先建立一个空文件夹，将下载的安装包另存为该文件夹下。

1、安装git
介绍：Git。是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。
官方下载地址：https://gitforwindows.org/
安装步骤：双击下载好的exe文件，一路next就好了。
安装好后，打开git bash，输入git version感受一下安装成功后输入命令的感觉。

2、安装NodeJs
介绍：Hexo是基于nodeJS环境的静态博客，里面的npm工具很有用，所以还是把这玩意儿装了。
官方下载地址：https://nodejs.org/en/
(说明：LTS为长期支持版，Current为当前最新版，下那个都行)
安装步骤：也是一路next就好了。

3、安装Hexo（确保前面的都已安装完毕）
a.再新建一个文件夹，用来储存blog网站所有的东西
b.打开git bash

（后续所有的命令操作若不加以提示，都是在git bash中进行）

c. 进入该页面后，输入你刚刚新建的位置（cd +D: or C:/你的文件夹)
例如：我的文件夹的名称是school，在D盘，那么我应该输入：

cd D:/school

（注意大小写，冒号，斜杠的正确书写。）
d.输入安装hexo命令：npm i -g hexo
完成后

完成后可输入hexo -v查看当前版本。

如果显示命令不存在，说明没有安装成功，则需重新安装。

4.初始化网站所需文件
在刚刚进入的位置下输入

hexo init

后面将出现下面的页面，需要联网clone相关文件

提示：如果一直停留在最后下载的步骤中，可能最后会失败，失败原因可能是因为访问外网速度太慢。我加了vpn后会好一点。如果一直卡在这个步骤的同学，最好是休息一下，好好吃一顿，不必纠结，等第二天早点起来，再重新执行命令可能就好了。以及后面需要联网下载的都是如此。我试验过几次都是如此，早上几乎一瞬间就加载完成，一到晚上就龟速，如果你非要像我一样执着，不达目的不睡觉，也是可以的，多操作几次可能就成功了（这样很浪费时间）。

克隆成功之后的页面是这样的。

这时候，你在去看看你刚刚新建的文件夹，会发现它多了很多文件，暂时不用理他们。

5、运行自己的本地网站

输入hexo g
然后输入hexo s
这时，你的界面将出现一个网址，即你的本地网站。
注：hexo 3.0把服务器独立成个别模块，需要单独安装：npm i hexo-server

将其复制粘贴至你的阅览器吧，你将见证你努力后的美丽风景！
（要用鼠标粘贴复制，Ctrl+C将使你的网站停止运行）

2、将GitHub作为自己网站的服务器（服务器托管）

1、在GitHub上创建一个仓库repository，格式为：yourname.github.io, 其中yourname是你的github名称，按照这个规则创建才有用哦。

没账号的先创建账号，注意账号名称将会是你的repository的一部份。（由于篇幅过长，我就不写如何创建GitHub了，网上很多教程）

新建仓库repository

例如我的名称是w5cschool,那么我的repository name应该为w5cschool.github.io,由于我已经建过了，所以提示不可以取这个名字。

然后滑到下面
选择勾选

然后Create repository就创建好了。

2、进入刚刚创建的仓库，点击setting

进入后，一直往下滑，直到看见GitHub 下面的choose a theme,选择一个主题后，将会出现下图所示的网址，这便是你在GitHub pages下托管的网页！

此时，你已经拥有了一个属于你自己的网址了！

将其输入阅览器中将会是你的网站首页！

那么，我们如何修改自己的网站的内容，如何控制它呢？

下面将揭晓。

3、添加ssh密匙
a.回到gitbash中，配置github账户信息（YourName和YourEail都替换成你自己的GitHub上的名称和邮箱）

例如我的GitHub上的名称为w5cschool,邮箱为1582485954qq.com
那么我应该输入：

git config --global user.name"w5cschool"
git config --global user.email"1582485954@qq.com"

b.创建SSH

在gitbash中输入：ssh-keygen -t rsa -C"1582485954@qq.com"，生成ssh。
下面将会出现如下界面，提醒你输入一个地址储存的地密码。可以直接输入C就可以了。

确认后你将看见一个提醒你输入密码的语句，如果不想设置密码（个人推荐），直接按确认即可，后面会出现确认密码，你再直接确认，ssh便生成了。

如果想设置密码的话，就输入自己的密码即可，然后再输入相同的密码确认。如果设置了，就要记住这个密码，以后访问可能都会要求输入。

c.复制ssh密匙

输入cd ~/.ssh
然后再输入cat id_rsa.pub
便会显示你的ssh密匙。

我用蓝色的框框框住的内容全部复制，然后进入自己的github，点击自己的头像的seting设置，

然后点击SSH and GPG keys，

然后点击 New SSH keys，

然后你会看到如下页面，title下可以随便取个名字，key下面就粘贴入刚刚你复制的那个密匙。最后点击Add SSH key。

然后你就快成功了！

d.可以先验证一下刚刚添加的密匙是否成功，回到git bash中，输入

ssh -T git@github.com

如果出现下面的页面，则说明你成功了。

4.修改配置文件
恭喜你，你现在离成功只有一部之遥了。
用编辑器打开你新建的blog文件夹下的_config.yml，修改_config.yml文件下Deployment的一些配置(冒号之后都是有一个半角空格的，没有将会失败)：

将yourgithubname改为你的GitHub name,我的GitHub name为w5cschool，则：

deploy:
  type: git
  repo: git@github.com:w5cschool/w5cschool.github.io.git
  branch: master

5、上传到github
先回到git bash,然后输入npm install hexo-deployer-git --save（这样才能将你写好的文章部署到github服务器上并让别人浏览到）

安装成功后，执行以下命令（建议每次都按这样的步骤走一轮）：

hexo clean
hexo generate
hexo deploy

其实可以简化输入为：

hexo clean
hexo g
hexo d

同样的，在进行hexo d时，可能会因为网络的原因导致一直不能部署成功，那么等第二天早上再试试吧。如果是其他问题，则再进行对应的解决。

至此，你已经将你的本地网站部署到了GitHub pages 上，任何人都将可以访问你的网站。记住你的网址，这将是你的一个私人博客网站 !

那么如何修改自己的网站？如何添加写文章、评论等功能？

码字不易，今天先写到这，给我一个赞我将会很开心^ - ^

请看下文。