从0开始搭建属于自己的网络博客


首先在搭建hexo博客之前我们需要的环境
我们需要先安装两个软件nodejs和Git。
nodejs搭建教程:https://www.cnblogs.com/xueweisuoyong/p/11914045.html
git搭建教程:https://www.cnblogs.com/xueweisuoyong/p/11914045.html
按教程安装好了之后,为了检验成功与否请按Win+R打开运行,再输入CMD进入命题提示符(看见弹出一个黑框就对了),然后在光标处开始输入node -v点击回车Enter键检验nodejs安装情况,如果出现版本号(比如我的是v16.13.1)则证明安装成功。安装好之后默认有我们的下载器npm,依然像上一步在命令提示符光标处输入npm -v点击回车检验是否已安装,出现版本号(比如我的是8.1.2)表示安装成功。为了我们下载速度更快,我们可以将我们的npm下载器关联国内淘宝镜像来加快我们一些插件的下载速度(由于一些网站服务器在国外,所以要跨境下载资源就很慢,这时我们就可以通过国内淘宝镜像来加快下载插件的速度),依然是在命令提示符光标处输入这条代码(npm config set registry https://registry.npm.taobao.org)记得是括号内的内容哦,不要复制括号,然后鼠标右键粘贴,点击回车,运行完之后在光标处输入npm config get registry进行验证,如果返回https://registry.npm.taobao.org,说明镜像配置成功。配置好淘宝镜像之后我们的下载命令中npm就可以改成cnpm了(c表示China中国,也就是通过服务器在中国的淘宝镜像下载npm网站插件)。按照教程安装好git之后,同样也是在命令提示符光标处输入git –version点击回车得到版本号(比如我的是git version 2.34.1.windows.1),这样就说明安装成功了。至此我们搭建博客需要的环境就配置好了。
为了保证大家能够在最短的时间内掌握博客的搭建,这里有一个0基础入门的博客搭建视频https://www.bilibili.com/video/BV1mU4y1j72n 大家直接按照这位up主的操作一步一步来即可
同学们按照上面的教程操作之后如果在浏览器网址栏里面输入你们的网址出现了
这样子的一个界面,那我们直接可以进入我们的美化环节了,首先我们可以通过这个网址https://www.lixl.cn/2019/092856736.html按照上面的提示对我们的博客页面进行DIY,比如说把原作者的信息改成我们的信息,以及换一个更好看更好用的主题,就比如说鄙人博客用的主题就是matery,也是按照这位博主的链接进行修改美化的。在此强调一点,要想把原作者的图片背景换成我们的图片的话,我们需要打开\themes\hexo-theme-matery\source文件夹里,里面的favicon.png就是我们的网站图标,我们可以将我们需要拿来做网站图标的图片连同名字和文件后缀名改成favicon.png进行同名替换,同理medias文件夹的图片我们也可以按照此方法替换,但要保持照片张数和原来一致,同样也是要将原来图片的名字和后缀名一起复制作为我们要用的照片的名字进行替换。
在我们千辛万苦的操作之下,原来那个网站终于有了一些变化,是不是更能展示属于自己的个性了呢?
接下来是我对网页的继续优化,首先颜色方面由于我也是小白,所以我参考了某位大佬的页面设置https://blog.csdn.net/cungudafa/article/details/106278206 但是不是要求一模一样哈,如果是小白的话建议先保持一致看看效果,如果还满意就暂时保留,不喜欢的话可以试着按作者操作的思路把主页颜色什么的调成自己喜欢的颜色,不一定要按作者弄这种樱花粉。另外有一点要注意貌似初始页面只有首页 标签 归档 关于 友情链接几个分页面,我们可以在hexo根目录里面打开git bash 输入 hexo new page “contact”和hexo new page “categories” 创建之后打开文件夹编辑.md文件按照之前添加tags about friends的语法内容填写保存退出,最后加载到网上后就能在页面上方发现多出来了两个部分“分类和留言板”。
为了是我们的主页功能更加强大我们可以给我们的博客里面的文章内添加评论系统,具体操作见于https://blog.csdn.net/slow_sparrow/article/details/117753100
在此要注意,本人在操作过程中发现最后一部分也就是更换表情的那一大串代码有异常,不建议修改,只按步骤操作到“更新Valine的版本”这一步即可,记得用编辑器(我用的是vs code)保存后再退出。
除此之外我们可以将主题(也就是那个hexo-theme-matery)目录里面的_config.yml文件打开,把二级菜单打开,也就是去掉“#二级菜单打开如下”下方代码前的“#”即可,然后保存。上传到网页之后我们就可以在博客右上方看到我们的media部分,鼠标放在上方就能显示我们的二级菜单有音乐电影照片相册等,具体如何设置音乐 电影 照片这些资源,同学们可以修改主题目录下的_config.yml文件里面也就是我们上一步操作的地方,把我们音乐 电影 图书 照片的url换成你们的网站,比如说我的books url是掌阅书城的网站地址,我点击二级菜单books就能跳转到掌阅书城,其他几个菜单大体也是这样的道理。
最后一部分呢,鄙人给我的博客添加了在线聊天功能,我们首先需要前往 Tidio 官网https://www.tidio.com/注册之后进入,点击左下角小齿轮设置,齿轮右侧会有一个目录,往下翻找到Developer复制Public Key,并将 Public Key 填入主题的 _config.yml 文件中(用编辑器搜索功能搜索tidio 大概在代码558列),并且记住还要记得启用该功能,也就是把enable后面的false改成true
保存退出。
最后的最后,在博客文件夹打开git bash,先用hexo clean清楚缓存,然后用hexo g形成静态页面,可以用hexo 打开本地静态页面进行检验 预览完毕之后记得按CTRL+C关闭本地静态网页,再输入hexo d 上传即可。


文章作者: Micheal
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Micheal !
评论
  目录