搭建个人博客（总结和分享）

个人博客搭建（经验分享）

|参考视频：https://www.bilibili.com/video/BV1Yb411a7ty?from=search&seid=17509877716371534716

|参考资料：安装nodejs、node.js入门教程、HEXO官网、git教程、git下载官网、hexo一些指令、教程参考、主题参考、hexo配置文件详解、

第一步：安装Node.js

​ 登入node.js的官网：https://nodejs.org

​ 下载LTS的win的安装包，然后直接安装。

​ 默认的什么都不用修改就可以了，如果要修改环境变量的话看参考资料。

​ 安装过程中会有选项自动检测安装其他的工具，可选可不选，选了会自动跳出powershell进行安装，我的版本是：v14.16.0。

​ 安装完成之后，win+R打开cmd输入node -v可以查看版本

C:\Users\s'w'l>node -v
v14.16.0

C:\Users\s'w'l>npm -v
6.14.11
#上面是查看安装的版本
C:\Users\s'w'l>npm install -g cnpm --registry=https://registry.npm.taobao.org
#这条是更换为淘宝的镜像源，这样会比较快
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\s'w'l\AppData\Roaming\npm\cnpm -> C:\Users\s'w'l\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
added 689 packages from 974 contributors in 41.217s
#完成之后查看一下版本
C:\Users\s'w'l>cnpm -v
cnpm@6.1.1 (C:\Users\s'w'l\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.11 (C:\Users\s'w'l\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@14.16.0 (C:\Program Files\nodejs\node.exe)
npminstall@3.28.0 (C:\Users\s'w'l\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\s'w'l\AppData\Roaming\npm
win32 x64 10.0.19042
registry=https://r.npm.taobao.org

​ 第一步就完成了

补充：nodejs简介：

​ Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！

Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使 Node.js 表现得非常出色。

Node.js 应用程序运行于单个进程中，无需为每个请求创建新的线程。 Node.js 在其标准库中提供了一组异步的 I/O 原生功能（用以防止 JavaScript 代码被阻塞），并且 Node.js 中的库通常是使用非阻塞的范式编写的（从而使阻塞行为成为例外而不是规范）。

当 Node.js 执行 I/O 操作时（例如从网络读取、访问数据库或文件系统），Node.js 会在响应返回时恢复操作，而不是阻塞线程并浪费 CPU 循环等待。

这使 Node.js 可以在一台服务器上处理数千个并发连接，而无需引入管理线程并发的负担（这可能是重大 bug 的来源）。

Node.js 具有独特的优势，因为为浏览器编写 JavaScript 的数百万前端开发者现在除了客户端代码之外还可以编写服务器端代码，而无需学习完全不同的语言。

在 Node.js 中，可以毫无问题地使用新的 ECMAScript 标准，因为不必等待所有用户更新其浏览器，你可以通过更改 Node.js 版本来决定要使用的 ECMAScript 版本，并且还可以通过运行带有标志的 Node.js 来启用特定的实验中的特性。

---

第二步：安装HEXO

​ 安装完成node.js后可以使用cnpm命令行工具来安装HEXO

C:\Users\s'w'l>cnpm install -g hexo-cli
.........
hexo -v
#查看版本

Hexo简介：

​ Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。大家可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

教程分三个部分，

​ 第一部分：hexo的初级搭建还有部署到github page上，以及个人域名的绑定。
​ 第二部分：hexo的基本配置，更换主题，实现多终端工作，以及在coding page部署实现国内外分流
​ 第三部分：hexo添加各种功能，包括搜索的SEO，阅读量统计，访问量统计和评论系统等。

第三步：下载git（win用户）

git简介：

​ Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。

​ 只需要简单的安装，并不需要详细的了解，之后再学怎么使用git，

​ 从官网下载安装即可。

​ 安装界面的英文分析参看这个：https://www.cnblogs.com/z-x-y/p/10074116.html

第四步：模板主题的生成

​ 安装好git后，创建一个文件夹blog

​ 以管理员身份运行cmd

#进入blog文件夹
e:
dir
cd blog
#生成模板
hexo init

​ 耐心等待，

项目主要文件目录介绍：
.
├── .deploy       # 需要部署的文件
├── node_modules  # 项目所有的依赖包和插件
├── public        # 生成的静态网页文件
├── scaffolds     # 文章模板
├── source        # 博客正文和其他源文件等都应该放在这里
|   ├── _drafts   # 草稿
|   └── _posts    # 文章
├── themes        # 主题
├── _config.yml   # 全局配置文件
└── package.json  # 项目依赖信息

版权声明：本文为CSDN博主「遇见0和1」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42365530/article/details/107750003

​ 在弹幕上看到的，不过我没用，直接就成功了，写在这里参考一下，在建好的文件夹下直接打开Git Bash here，输入hexo init可行。

​ 启动：

hexo s
E:\blog>hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

​ 在浏览器上尝试访问http://localhost:4000

​ 成功！！！

​ 截图：

第五步：博客的内容

​ 可以使用markdown来写，这就很方便了。

​ 存放路径：blog/scource/_posts/

​ 一些必要的hexo的命令：

简写指令:

hexo n "我的第一篇文章"`       等价于        `hexo new "我的第一篇文章"`  还等价于       `hexo new post "我的第一篇文章"`    
 `hexo p` 等价于 `hexo publish`
 `hexo g` 等价于 `hexo generate`  
 `hexo s`等价于 `hexo server`     
 `hexo d` 等价于 `hexo deploy`
 `hexo deploy -g`  等价于 `hexo deploy --generate`
 `hexo generate -d`等价于`hexo generate --deploy

注: hexo clean 没有 简写, git --version 没有简写

指令说明:

hexo server #Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。
hexo server -s #以静态模式启动
hexo server -p 5000 #更改访问端口 (默认端口为4000，'ctrl + c’关闭server)
hexo server -i IP地址 #自定义 IP
hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹
hexo g #生成静态网页 (执行 $ hexo g后会在站点根目录下生成public文件夹, hexo会将"/blog/source/" 下面的.md后缀的文件编译为.html后缀的文件,存放在"/blog/public/ " 路径下)
hexo d #将本地数据部署到远端服务器(如github)
hexo init 文件夹名称 #初始化XX文件夹名称
npm update hexo -g#升级
npm install hexo -g#安装
node-v #查看node.js版本号
npm -v #查看npm版本号
git --version #查看git版本号
hexo -v #查看hexo版本号

第六步：部署到Github上

​ 登入到GitHub

​ 创建一个新的仓库：Create a new repository

​ 如图：

​ 回到cmd，注意一定要回到blog目录下安装否者会报错

​ npm install hexo-deployer-git --save

​ 设置文件：_config文件（在blog文件下）

deploy:
  type: git
  repo: https://github.com/scdxxm/scdxxm.github.io.git
  branch: master

​ 在文件的最后，填写git，repo（自己的github仓库地址），branch，

​ 保存退出。

​ 回到cmd

  git config --global user.email "github邮箱"
  git config --global user.name "名称"

​ 然后hexo d

​ 一定要在blog目录下

​ 等待跳出登入的信息，然后登入，之后就上传成功了，返回github的仓库，里面就有了

​ 现在就可以访问了，但是可能是因为墙的原因，访问不了，所以下面将他转移到国内的gitee上来。

第七步：部署到Gitee上

​ 其实步骤和上面差不多，如下

​ 登入gitee

​ 创建一个新的仓库

​ 通过git上传，修改config目录。

deploy:  type: git  repo: https://gitee.com/scdxxm/blog.git  branch: master

​ 回到cmd

​ hexo d

​ 输入账号密码。

​ 回到gitee，刷新仓库，有了。

​ 然后如下：

​ OK！！！

问题：

​ 我的博客网页如下，不是理想的效果：

​ 经过网上教程的查找终于发现了，问题在仓库设置的时候的语言上。

​ 选择Jave Script，问题解决。

第八步：主题选择