如何从零开始搭建一个好看的博客

如何从零开始搭建一个好看的博客

博客预览

一. 注册GitHub账号并创建仓库

–GitHub官网
1. 注册和登录

2. 然后创建仓库

** 需仓库名需和用户名一致，格式为：名字.github.io**

二.nodejs下载安装及配置环境

1. 下载安装nodejs:
下载地址

安装图示

  安装完之后打开终端 window+R，输入命令：“node -v” 查看版本号，出现版本号，说明你的电脑上已经有nodejs，安装成功！

安装好默认有npm。验证npm 输入npm -v 出现版本号表示安装成功

2. 配置环境(window + R):

为什么需要配置环境:

  NodeJS和NPM安装好了以后并不能直接使用，默认情况下，NPM安装的模块并不会安装到NodeJS的程序目录，比如我们安装的时候设置的D盘，“D:\Program Files\nodejs”，而我们使用npm安装一个cluster模块他会出现在C盘默认的路径下面，所以，如果我们不修改npm的模块安装目录，那么它默认情况下都会安装到这里，随着你测试开发各种不同的项目，安装的模块越来越多，这个文件夹的体积就会越来越大，直到占满你的C盘。所以我们要修改npm的配置。

配置步骤

1. 在nodejs文件夹下，创建两个为文件夹：node_global; node_cache,并在node_global下新建node_modules文件夹
2. 使用下面命令将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录

npm config set prefix "node_global文件的路径"
npm config set cache "node_cache的文件路径"

3. 高级系统设置——环境变量
   新增系统变量：
   变量名填：NODE_PATH
   变量值填：（文件路径）node_global下node_modules的路径
   修改用户变量中Path下的node.js的路径，改为node_global的文件路径

1. 修改完成后测试：输入命令：node 回车——再输入 require(‘cluster’)
   出现以下内容说明配置完成
2. 使用npm使用国内淘宝镜像的方法:
   命令

npm config set registry https://registry.npm.taobao.org

验证命令

npm config get registry

如果返回https://registry.npm.taobao.org，说明镜像配置成功。
或者

cnpm -v

有返回信息不报错就配置成功了

三，Git安装

Git官网下载，网站地址：https://git-scm.com/downloads

下载完安装

四，下载[hexo-script]的安装脚本（使用Git Bash Here）

1. 只需要在某个目录下（在D盘下建个博客文件夹）,打开git bash然后执行下面这条命令即可下载完成

curl -O https://cdn.jsdelivr.net/gh/kjhuanhao/hexo-script@master/install.sh

但更建议直接在releases下载,选择最新版本,只需下载install.sh即可，网址：https://github.com/kjhuanhao/hexo-script/releases

2. 检测node.js环境
   在存放install.sh脚本的目录中,右键打开git bash然后运行以下命令:

source install.sh test_node

出现了版本号和成功的提示信息代表配置成功. 如果你并发现有版本号的出现,而是红色的错误信息,你可能需要手动配置node.js的环境变量,或者重新安装node.js并注意勾选Add to PATH

3. 检测git环境

  如果你想要检测git环境或者查看当前git的版本号,您可以在存放install.sh脚本的目录中,右键打开git bash运行以下命令: source install.sh test_git
  一般情况下安装git工具后git环境是会自动配置的,可以无需检测git环境.此脚本可以用于linux系统,出现版本号信息则配置为成功.

4. 一键安装hexo博客
   在存放install.sh脚本的目录中,右键打开git bash运行以下命令

source install.sh hexo_win

等待一会，当您看到出现Please run hexo s to check it out!的提示,证明您已经安装成功,此时你可以运行hexo s 然后查看你的博客

**注意:**得先cd到hexoblog目录或在hexoblog下使用Bush再输入hexo s

当看到出现了一段地址:http://localhost:4000时，复制到浏览器打开，就可以本地预览了

5. 一键生成SSH秘钥
   在存放install.sh脚本的目录中,右键打开git bash运行以下命令: ./install.sh git_ssh
   
   可以看到会有四条可执行命令,输入对应数字可以执行对应的命令:
   1)Key 执行1后可以一键生成秘钥
   如果你的电脑已经存在秘钥,程序将会自动退出
   2)SSH 执行2后可以查看你电脑中已生成的秘钥]
   3)Verify-github 执行3后可以检查秘钥是否配置github成功
   4)Verify-coding 执行4后可以检查秘钥是否配置coding成功
   生成秘钥后别忘记将秘钥添加到账号里,否则秘钥不会配置成功

(注意：复制密匙配置到github）

6. 一键部署hexo博客
   在存放install.sh脚本的目录中,右键打开git bash运行以下命令:

source install.sh deploy

然后将生成的up.sh复制到hexoblog文件,也就是复制到你的博客根目录下（执行7）
然后在存放up.sh脚本的目录中,右键打开git bash运行以下命令: source up.sh
之后即可自动部署到你的github或者coding上

1. 部署博客之前必要的配置：
   打开根目录配置文件_config.yml
   
   找到deploy,它一般在最后一行,按照以下的格式修改即可
   
   repo: 这里填你的仓库地址,建议使用SSH地址,它是以git开头的
   

五，配置主题

1. 下载主题
   hexo-theme-matery 是一个采用 Material Design 和响应式设计的 Hexo 博客主题，点击 这里 可以查看示例效果。点击 这里 （https://codeload.github.com/blinkfox/hexo-theme-matery/zip/master）下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到 Hexo 的 themes 文件夹中即可。
2. 切换主题
   修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery
3. 上传
   hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹
   hexo g #生成静态网页 (执行 $ hexo g后会在站点根目录下生成public文件夹, hexo会将"/blog/source/" 下面的.md后缀的文件编译为.html后缀的文件,存放在"/blog/public/ " 路径下)
   hexo s 本地预览
   hexo d #自动生成网站静态文件，并将本地数据部署到设定的仓库(如github)

最后在gitee中的服务Gitee Pages下重新更新