搭建自己的个人网站(上)

本篇个人网站搭建系列博文是基于:GitHub+Hexo。
难度指数：♥♥
系统环境：win8

前言：真正搭建这个网站框架的时间也就花了两个晚上，不需要你有多么深厚的编程基础，可能会遇到一些坑，就需要你遇到问题解决问题的能力了，还有搜功，因为很多你遇到的问题很多人都遇到了，太阳底下没有新鲜事儿，会搜索基本解决了大多数问题。

第一步：准备必要的软件

1.Git下载
Git,选择适合自己电脑的环境，一路Next下来就行了。

2、安装node.js
node.js,也是基于自己的电脑环境选择下载，下载最新版本，在Windows安装时务必选择全部组件，包括勾选Add to Path。安装完成后，在Windows环境下，打开命令行提示符，输入node -v，看到版本号正常输出，则安装完成。

第二步：Github注册与配置

1.注册Github

点击→https://github.com右上角sign up

注册完成后，记住自己的用户名，因为后续个人网站的网址格式为：username.github.io
这个username就是你的github用户名。
这里我的GitHub账号是：YUTING0907
个人网站：YUTING0907.github.io
你后续也可以自己绑定域名，叫个更炫酷的名字XXX.com

2.创建Repository

登陆GitHub，点击右上角的+，会出现New repository创建一个与你博客相关你的Repository进行管理，之后你的博客都会在GitHub的这个Repository里同步更新。

Repository的名字是username.github.io，比如我的YUTING0907.github.io。其余可以先不填，点击Create repository

3.配置SSH Keys

SSH Keys用来使本地git项目与GitHub联系，这样能在GitHub上的博客项目是最新更新的。

检查SSH Keys的设置
I. 开始–所有应用–找到git bash

II. 检查你电脑里现有的SSH Key
$ cd ~/.ssh
如果显示 No such file or directory，说明这是你第一次用git

III. 接下来生成新的SSH Key:
$ ssh-keygen -t rsa -C “邮件地址”
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

这里的邮箱地址，输入注册 Github 的邮箱地址

然后系统会要你输入密码：
Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

再回车，这里会提示你输入一个密码，作为你提交项目时使用

注意：输入密码的时候没有输入痕迹的，不要以为什么也没有输入。
最后看到这样的界面，就成功设置ssh key了：

IV. 添加SSH Key到GitHub上

在本地文件夹找到id_rsa.pub文件，看上面的图片第四行的位置告诉你存在哪里了，没有的话可能是隐藏了，勾选一下文件扩展名 隐藏的项目。

回到你的GitHub主页，右上角点击头像选中Setting

继续选中左边菜单栏的SSH and GPG keys

Title最好写，随便写。否则可能出现各种各样的二逼问题
Key部分就是放刚才复制的内容了，点击Add SSH key

V.测试

git bash里输入代码：$ ssh -T git@github.com

The authenticity of host 'GitHub.com (52.74.227.119)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)

输入yes，回车
按照提示输入刚才设置的密码，回车
You’ve successfully authenticated…
设置成功！

VI.设置用户信息

$ git config --global user.name "YUTING0907" 

//输入注册时的username

$ git config --global user.email  "YUTING9597@163.COM" 

//填写注册邮箱
把名称和邮箱替换成你自己的,SSH Key就配置成功啦！
本机已成功连接到 github。

第三步：搭建Hexo博客

利用npm命令安装hexo
npm Node Package Manager是随同NodeJS一起安装的包管理工具，想了解更多可以自行去百度。

$ npm install -g hexo

安装完成后，在本地创建一个与 Repository中博客项目同名的文件夹username.github.io(如D:/YUTING0907.github.io)在文件夹上点击鼠标右键,选择 Git bash here（可以代替命令行指示符的存在~）,【这一步的作用是因为以后博客部署和更新都要在此文件夹下】

hexo初始化

hexo init

安装依赖包

$ npm install

这里我踩坑了，

然后上百度、google各种找解决办法，后来发现是因为
Your versions of node and npm are years old and no longer supported。版本太低了，后来更新node.js版本就好了.
npm install 报错解决办法
这里放上更新node.js的方法
方法一：执行下列代码

npm install npm@latest -g

但我的电脑出现了如下报错，如有朋友出现更新错误，课移步方法二。
C:\Users\lenovo\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js:79
let notifier = require(‘update-notifier’)({pkg})
^^^
方法二:
1.到node官网（https://nodejs.org/en/）
下载最新版或者官网推荐版本，我下载的是10.14.1。

2.将下载的文件安装到之前安装node.js的地方
通过where node命令查看node路径

将刚刚下载的文件放到上面查到的路径中
双击刚刚下载的文件,点击next 具体安装方法和之前第一次安装一样，但是【注意在选择路径的时候要选成上面查到的node路径中】

3.安装完成。通过npm -v和node -v查看当前版本号

确保git部署

$ npm install hexo-deployer-git --save

本地查看
做到这里恭喜你😀，现在已经搭建好本地的 Hexo 博客了，执行完下面的命令就可以到浏览器输入 localhost:4000 查看到啦！
$ hexo g //生成更新网站
$ hexo s //这一步是让你可以在本地localhost:4000可以浏览网站，一个服务预览的作用，退出服务按ctrl+c
$ hexo d //部署网站

【小提醒】如果在配置 SSH key 时设置了密码，执行 hexo d 命令上传文件时需要输入密码进行确认，会出现一个小框框，让你输入密码，你输入密码即可部署更新。

执行完 hexo init 命令后会给一个默认的主题：landscape

最后一步：将博客部署到username.github.io

复制SSH码

进入 Github 个人主页中的 Repository，复制新建的独立博客项目username.github.io的 SSH码

编辑整站配置文件
打开 D:/username.github.io/_config.yml,把刚刚复制的 SSH码粘贴到repository：后面

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

冒号后一定要空一格。否则会报FATAL can not read a block mapping entry的错。

当当当当~~到这里你已经拥有一个属于自己的网站，可能有点简陋，但是整个框架已经搭起来了。期待下一篇把网站拾掇得更好吧。

搭建参考：
如何搭建自己的个人网站

更新node

npm install错误