Blog搭建

概述：

本着找工作中，博客的重要性，引发我对博客搭建和资料保存的思考，因此有了这篇文章；

就搭博客而言好处如下：

1-是对自己所做所为的总结和记录，同时可以方便日常翻阅，对回顾有好处；

2-是一直展现平台，对以后的交流以及一定证明带有保证性；

3-是技术和记录素养的体现，同时增加成就感；

缺点如下：

1-花费时间搭建平台，同时对以后任何项目和事物都增加了一个格外的步骤，记录和总结；

2-就以后而言，需要一定时间精力和金钱去维持该博客；

综上所述，搭建博客是很有必要，同时也要积极维护。

搭建流程：

1-服务器，平台选择:

搭建博客主要需要的：储存地点（云储存），博客框架，上传和查看方式。

其中就需求而言，对我需要满足以下的要求：

1-简单访问，访问界面简洁舒服；	
2-写入简单，上传文件简单；	
3-读取简单，希望可以上传部分简单的文件
4-响应快

云存储：七牛云，腾讯云服务器，阿里云服务器，githubpage。前面三个都需要一定money，所以选择githubpage，免费同时名声好，但是相应速度慢。

博客框架：采用hexo，资料多同时，比较成熟的方案。

基于以上，我采用方案是：GIthubPage，hexo博客搭建个人的博客

2-hexo搭建：

具体请参考文档：文档 | Hexo

总体来说：

1-安装Node.js，测试正常运行。

2-下载hexo

3-选择主题，修改主题‘

4-完成设计，上传Githubpage

3-安装环境

1-Node.js 下载请参考文档，但是要注意测试，测试代码如下：

const http = require('http');

const hostname = '127.0.0.1'; // 服务器地址
const port = 3000; // 服务器端口号

// 创建 HTTP 服务器对象
const server = http.createServer((req, res) => {
  // 设置 HTTP 响应头部
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  // 发送 HTTP 响应内容
  res.end('Hello, World!\n');
});

// 启动 HTTP 服务器监听指定的地址和端口
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

2-下载hexo命令：

npm install -g hexo-cli

3-初步设置Blog标准模板

hexo init blog
cd blog
npm install
hexo server

4-hexo主题选择和修改

我的主题选择：theme-kaze/hexo-theme-kaze: ⛵ A responsive, modern Hexo theme (github.com)

补充说明：主题选择：主题虽然多，但是坑也不少，很多主题所拥有的参考资料少，操作复杂。对于不懂得JavaScript语法和前端知识的人而言，选择好主题是很有必要的。

主题修改中的注意点：

1-更换字体（en，zh-ch（简体），zh-tw（繁体）），****需要将相关的yml文件放入根目录下，并更改根目录下默认的_config.yml文件中language中

2-添加内容在 根目录下source文件夹类 post文件中添加markdown即可

3-添加iron图标和链接（B站，邮箱），在主题中layout文件夹中，修改head.js文件，增加语句，如下图：

4-填加分类，标签，都是通过命令在markdown文件中添加，而友链则是在主题中_config.yml中修改设置使用

5-总的来说要理解 layout 文件夹，和 _config.yml 文件即可

5-上传步骤：

1-Powershell command 界面中，cd进入文件夹，使用下面命令，下载 hexo-deployer-git 插件

npm install hexo-deployer-git --save

2-在根目录表中_config.yml 设置上传的设置

deploy:

 type: git

 repo: git@github.com:hiki-jinqiang/hiki-jinqiang.github.io.git  # Github pages地址

 branch: master

3-上传：hexo deploy 即可

6-总结

完成第一次搭建后，后面基本就只要上传markdown文件到source文件并添加标签和分类就好就行了，当然后面还有很多学习的，比如前端方面的知识以及界面的设计，这次搭建Blog的意义还是很好的。后面还需要不断的维护，怎么舒服怎么来。

ISSUE：

1-动静网页的区别和设置？；

2-图床，url的概念？；

3-前端代码设计，如何更好上传？。

参考资料：

搭建博客：参考1

图床：

picgo： GIthub：Github + PicGo + jsDelivr 创建稳定、免费图床 - 简书 (jianshu.com)

七牛云：picgo使用七牛云图床 - 知乎 (zhihu.com)

[Typora+PicGo+七牛云搭建图床 - 腾讯云开发者社区-腾讯云 (tencent.com)](https://cloud.tencent.com/developer/article/1834661#:~:text=Typora%2BPicGo%2B七牛云搭建图床 1 PicGo也是直接上github上下载最新版本即可，有关PicGo的一些安装配置，可以访问我以前写过的博文： github搭建图床使用阿里云对象存储OSS%2BPicGo搭建图床使用七牛云和PicGo搭建图床 2 PicGo,服务器，用于配合其他应用来调用 PicGo 进行上传。 3 打开PicGo设置，进入 PicGo 设置–设置Server)

typro：hexo博客如何插入图片 - 知乎 (zhihu.com)

补充说明图床概念：

对于修改图片模式，考虑一般用网上的图片，就此引出图床概念。

图床：将图片上传到网上，便于各文件加载，避免因为图片的本地加载，导致的图片在不同电脑用户之间无法正常打开的情况；

技术实现：

1-储存图片的服务。包括：github，gitee，腾讯云，阿里云，七牛云

总结：github受网络限制太多，不建议使用，但是我这边也可以尝试一下，可能是自己的地址填写错误；

七牛云：需要使用域名，现在使用体验域名，只有一个月的使用体验。可以对七牛云进行学习，blog直接布置在七牛云上，10GB免费够用了。

2-链接图片：网址连接，图片的上传，下载和加载

picgo都可完成，也好用，但是就是那种错误的机制，太不细节了，不能就给网络连接错误呀。

typro的两种方式：

1-本地简历imag文件，使用相对地址，连着markdown和imag文件就可以上传了。

2-就是网上图片地址加载 URL是关键；

URL、概念：统一资源定位符（英语：Uniform Resource Locator，缩写：URL，或称统一资源定位器、定位地址、URL地址[1]）俗称网页地址，简称网址，是因特网上标准的资源的地址（Address）