搭建网站过程2（从零开始版）

发表于 更新于 分类于 ， 本文字数： 3.5k 阅读时长 ≈ 3 分钟

本文摘要：

  1. 下载npm
  2. 下载并配置hexo
  3. 自定义next主题
  4. 如何让图片在网页上显示
  5. 添加标签、分类、关于页面
  6. 修改文章字体大小
  7. 要注意的两个点：git和hexo命令的使用范围、clone命令的先后顺序

搭建网站所需的完整步骤（除创建GitHub仓库）

1. 下载npm

npm安装并配置环境变量（安装node.js）
前车之鉴，为了做到周全这一步我是结合着几篇文章来看的，说的大同小异大差不差。唯一遇到的一点问题是安装时有一个没有默认的选项是安装必要的工具，我勾选了，但后来实际上又没有下载（因为提示是说安装powershall迷惑了我），这会直接导致我能看到npm.exe却没有办法在命令行里找到npm。后来是change的时候不勾选就成功了。

2. 下载并配置hexo

教程：纯小白如何搭建自己的Github博客并写第一篇博文

其实我是先看到这篇文章才知道要下载npm和hexo。里面说的很好，网上教人搭网站大多停留在能用那个URL打开网页就结束了，不会讲如何发博客，虽然这篇文章很短，但内容很实用。

我遇到的问题是，他说要我在我打算装blog的父文件夹下载hexo，但是这和我下载npm不是同一个文件夹，install hexo一直失败，说hexo不是内部也不是外部命令。我在npm所在的父文件夹下载也失败了，最后是在我本地仓库的父文件夹的目录下才下载成功，到现在也没搞懂为什么hh。结论就是多换地方试试。

最后是hexo deploy命令，哈哈直接导致了前仓库完全被覆盖。现在想想这样误打误撞是一件好事捏，之前那个模板又不好看，里面超多post，wiki和images我还没学会批量删除，一点点删很消磨我耐心的。

3. 自定义next主题

既然从零开始搭建网站，当然是要好好的美观美观啦！支撑我做下去的动力还有一个是找到了很多很好的教程，指导我一点一点的完善，改进。以下是对我帮助很大的文章！致敬！

这是我找到的第一篇文章，里面的版面和风格挺吸引我的，写得也很清晰明了。是跟着这篇完成了最基本的title等信息的更改。遇到的问题是里面提到的很多配置是要再_custom.stym和_style.stym等文件里进行的，我在自己的文件夹找不到这些文件，因此就有了第二篇——

这篇是今天早上完成的工作，基本是跟着他完成了目前网页的个性化制作，本身网页就好漂亮哈哈给人产生“跟着他也能做得这么好看”的想法，给人以信心，里面最重要的是解决了 新版hexo找不到文件夹如何实现个性化功能的问题，里面的粒子时钟和圆角设计好喜欢好喜欢！

但是这篇文章也有需要更新的地方：

首先是我第一次hexo g 的时候就提示我next.yml已经被deperated弃用了，让我升级至hexo 5或以上（xs）并改名为config_next.yml.

其次是在hexo-theme-next文件夹下的_config.yml文件夹里已经没有了override这一配置（有一个override但那不是实现覆盖主题的功能），意味着不能在/source/_data/下面新建next.yml来实现自定义主题的效果，所以我上一点所说的文件不知道还有什么用，只是改名后确实不会报错了。

噢想起来昨晚上闹的一个乌龙，deploy上去之后主题完全丢了，后来看着_config.yml文件看了一会才发现是我的URL写错了，本该写我的网站网址，结果写成了我的仓库网址hh。

乌龙2是在添加头像时把_config.yml里面的备用语句前面的#去掉了但是忘了把链接前的#去掉好笨好笨。

4. 如何让图片在网页中显示

这个问题可谓是困扰了我一天啊，找了好多文章试了几种方法才成功！最后是看到这篇文章的最后一点让我幡然醒悟！原来人家是这样解决问题的，我可能要搜：GitHub图片链接不显示之类的才行。

Markdown使用Github图片地址

最终我的做法是：

第一步 把图片放在本地仓库的文件夹里，hexo deploy过去，图片就生成了网址。

第二步 把本地文章的图片链接替换成GitHub上的链接。

第三步 把链接中的blob改成raw，图片瞬间就出来了！太令人激动啦啦啦啦

我找到的第一篇提出的两种方法，方法一是直接在库上面新建.md文件，按照Markdown格式把图片在GitHub的链接放进去，preview的时候就能显示。我试过可以，但是这发布不上网页啊！方法二是在把图片直接插入.md,写完后把整篇文章的文字加图片复制到另一个空的.md，再上传就会把本地图片也一起上传。这个想法看似可行实际有点荒谬，代码这里根本看不到图片，而能看到图片的预览这里根本复制不了……

5. 添加标签、分类、关于页面

这一步的教程找了好久呢，大概半个小时？没踩中关键词，一开始弹出来的都是GitHub仓库的页面装扮教程。所幸这一步的难度很低啦，创建加上写了一篇about也就用了40min。教程是这个：

hexo博客添加标签、分类、归档、关于等页面

6. 修改文章字体大小

2023/1/11更新：这大半个月里写了好多文章，字体和间距太大已经影响到我的阅读速度和阅读感受了，在今天发一篇文章前研究了一下如何改字体。

在我电脑的更改路径是

\hexo-theme-next\source\css_variables
下的base.styl

1
2
3
4
5
6
7
8
9
10
// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
//1.0
$font-size-smallest       = .75em; //.75；
$font-size-smaller        = .8em; //.8125；
$font-size-small          = .875em; //.875；
$font-size-medium         = 1em; //1;
$font-size-large          = 1.0em; //1.125;
$font-size-larger         = 1.25em; //1.25;
$font-size-largest        = 1.5em; //1.5；

一开始改base会影响全局的字体，导航栏字体小了不好看，因此继续试，改large会仅让文章字体改变；

上面那段代码的下面：

1
2
3
// Global line height
$line-height-base         = 1.9; // 2.0;
$line-height-code-block   = 1.6; // Can't be less than 1.3;

就是改行间距的，我把2.0改成了1.9。但是始终没发现哪里改段间距，只好作罢。现在网页已经美观很多啦！

要注意两个小问题

1. git 和 hexo 命令的使用范围

git命令只能在有.git文件夹的目录里打开Git Bash here才可用。clone需要在本地仓库文件夹内打开才可以成功pull和push。

hexo命令是只能在命令提示符进到本地仓库的目录下才可以使用。在我电脑要打开的路径是：D:\colorlife\diligencyj.github.io

（当初第一次使用时教程是有强调这一步的，但是再次使用这两个命令时不约而同的忘记了……为了打开它们还研究了好一会……）

2. clone仓库时命令的先后顺序

当想指定一个文件夹用来做clone的时候，首先是要git init初始化仓库，（虽说很多地方说不用，还说文章有.git文件会导致clone不成功，噢对了.git文件是隐藏文件，要“查看——隐藏的文件”才能看到）。**其次是git clone 仓库SSL地址**。

写在最后

这次的搭建持续了可能也有十来个小时吧，从昨天早上十一点，到晚上睡觉，中午睡了两小时，晚上看了两小时音乐剧，真正用来做网页的时间也不多。但真的很顺利了可以说是呜呜，感谢我搜到的所有文章，你们告诉我的大多数解决方法都好棒！修缮过程到这里就先告一段落啦！

今天总算是知道怎么把图弄上网页了，但大块的图实在是不太美观，上一篇用了的就算了，这一篇就尽量不放图了。（其实也没有记录了，因为我发现在我的电脑黑屏两小时不到就会自动关机，清空所有的网页……）

2022/12/19

今天又上来看看，浅浅改了文章的一些格式和目录，以及给网站新增了搜索、点击礼花特效、字数和阅读时长统计、修改链接样式、显示摘要这六个功能！嘿嘿已经满熟练的啦，对于什么文件在哪个目录下，大致要修改什么地方，进行的很顺利捏！