前端技术小白零基础搭建免费个人网站

学大前端

前端开发知识分享！

今天写这篇文章真的不容易，希望粉丝们多多分享！给我动力

来看下网站效果图：

嘿嘿~不错吧。挺高大上的

接下来从零开始搭建吧！

滴滴~~装逼时刻开始啦！

1、安装Git bash

先把软件下载到本地，双击exe文件，默认勾选一路next就可以了。（注：我系统是32位，工具获取在微信回复：git）

在桌面右键点击打开Git Bash Here

输入git version显示版本号表示安装正确！如果没安装成功这就需要你的聪明才智去解决问题了。

2、安装nodeJS

先去nodeJS官网去下载msi文件，下载好后双击进行安装。这里不截图了，反正也是一路next。如果遇到问题，就发挥你的聪明才智去解决问题吧。

安装完成后，在Git Bash Here，输入node -v显示版本号表示安装正确！

3、安装hexo

看到这么多安装，千万不要紧张，小哥哥小姐姐们一定要稳住，别怕，因为后面的东西都是在git bash中用npm工具安装就好了。

先创建一个文件夹（用来存放所有网站的东西），然后打开该文件夹。在文件夹右键点击Git Bash Here

接下来输入命令npm install -g hexo-cli记得回车。注意：感觉没动静，不是卡死了，是在下载中，需要一点时间！来看我的操作

接下来输入hexo init运行完后文件夹里有很多文件啦！看我操作的截图

跟我不一样的说明你操作失败了！

文件夹里的文件解释一下：

node_modules：是依赖包

public：存放的是生成的页面

scaffolds：命令生成文章等的模板

source：用命令创建的各种文章

themes：主题

_config.yml：整个博客的配置

db.json：source解析所得到的

package.json：项目所需模块项目的配置信息

做好这些前置工作之后接下来的就是各种配配配置了。

4、注册GitHub网站账号

进入github.com 官网点击Sign up ，英文看不懂就网页一键翻译，这里大家自己发挥吧。不做过多讲解

注册好后登陆进去，创建一个仓库，如图所示：

最后点击：create repository

点击后就是这样的啦！

点击界面右侧的Settings，你将会打开这个库的setting页面，向下拖动，直到看见GitHub Pages，如图：

点击Automatic page generator，Github将会自动替你创建出一个gh-pages的页面。

5、本地仓库绑定

接下来回到git bash中操作啦！需要做账户绑定操作才能连接刚刚我们创建的仓库。

小哥哥小姐姐们开始敲命令了，稳住哦，git bash我不提供操作图了，请按照我的步骤来：

创建 SSH Key

$ ssh-keygen -t rsa -C “这里输入github注册邮箱号”

一路回车，使用默认值即可

登陆GitHub，打开“Settings”->“SSH and GPG Keys”，“New SSH Key”操作

Title任意，在Key文本框里复制id_rsa.pub文件里的内容。注：文件的内容默认是在本地电脑 中，用记事本打开。

点“Add SSH Key”，注：我添加过了，所以显示New SSH key

验证是否成功，在git bash中输入:

如果出现以下错误解决

错误提示一：ssh_exchange_identification: read: Connection reset by peer // SSH使用HTTP代理来登录服务器

第一次使用需要设置用户名和email

$ git config –global user.name “这里输入github用户名”

$ git config –global user.email “这里输入github注册邮箱号”

6、部署项目

到网站文件夹中用编辑器打开_config.yml文件，l拉到最后添加以下代码，网址别跟我一样，写你自己的

有人问：网址在哪里找，看下图

保存好后，回到git bash中，分别执行以下命令：

第一条命令：hexo clean

第二条命令：hexo generate

第二条命令：hexo server

来，现在用你的浏览器输入：http://localhost:4000

接着你就可以遇见天使的微笑了~

7、网站文件上传github仓库

在git bash中摁 Ctrl+C 先结束掉上一次开启的服务。

先要安装一个服务，在git bash 输入：npm install hexo-deployer-git --save

接下来开始依次执行以下命令：

第一条命令：hexo clean

第二条命令：hexo g

第二条命令：hexo d

在浏览器中输入https://xdqianduan.github.io就可以看到你刚才做的网站啦！