搭建博客所需要的知识

运用的技术

框架:hexo

服务器:静态部署仓库,Gitee,git

运用的主题: fluid

构建步骤

参考资料

搭建个人静态网站,避坑

hexo最全搭建教程

Markdown 基本语法

hexo+Gitee搭建个人博客

一 首先在Gitee完成注册和实名认证 需要(4~5天)

这个是官网,代码就放在这个平台,相当于一个免费的服务器,用来部署静态的界面

Gitee官网

二 下载git 托管项目

git可以很方便的上传代码到Gitee仓库,必备的工具

安装git

下面所有的指令都是在git bash中使用(基于Linux系统,很多Linux的指令都可以使用)

三 hexo 相关指令

hexo的安装

npm install hexo-cli -g

初始化项目

hexo init myblog

清空hexo缓存文件

hexo clean

根据网页文件生成新的网站文件

hexo g

启动本地服务器,查看效果

hexo s

安装上传仓库的插件

npm install hexo-deployer-git --save

一键部署,并且推送到Gitee仓库

hexo d

git的相关指令

git初始化文件

git init

添加所有文件到缓存区

git add .

添加推送标注

git commit -m "first commit"

拉取远程仓库

git remote add origin (git地址 不需要括号了)

推送内容

git push -u origin "master"

后续推送

git push

fluid主题的运用

1. 开始使用
2. 配置指南
3. 进阶用法

其他部分配置

新建选项和界面

hexo new page 页面名字

创建成功后,在/source/about/index.md添加layout依赖

设置看板娘

开启评论

设置背景图和文章图为随机

1. 先将所有图片都下载到source文件里一个文件夹下面,我是myblog/source/imgs/new文件夹下面

2. 设置对应主题的_config.yml

   banner_img: /imgs/now/p
   default_index_img: /imgs/now/p

3. 然后用python将所有的图片都命名为统一格式,类似于p1,p2这样的

   import os
   
   path = "C:\\Users\\WYL21\\Desktop\\blog\\myblog\\source\\imgs\\now"
   
   i = 1
   for name in os.listdir(path):
       # print(name)
       oldPath = os.path.join(path, name)
       newName = "p"+str(i) + ".png"
       # print(newName)
       newPath = os.path.join(path, newName)
       i+=1
       os.rename(oldPath,newPath)

   注意修改文件名为不可逆操作,请确定修改内容无误在进行修改

4. 在layout找到index.ejs,这个文件是描述主页的每篇文章的缩略图

   <% var post_url = url_for(post.path), index_img = post.index_img || theme.post.default_index_img 
       
       if (index_img && index_img.charAt(index_img.length - 1) === 'p') {
         var random_number = Math.floor(Math.random() * 50) + 1;
         index_img = index_img + random_number + ".png";
         
       }
       %>

   加一个检测,如果路径最后一个字母为p,就设置成一个随机地址

   同理,在header的banner.ejs中可以修改每一个顶部图

   <%
   var banner_img = page.banner_img || theme.index.banner_img
   var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height)
   var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha)
   var subtitle = page.subtitle || page.title
   
   if (banner_img.charAt(banner_img.length - 1) === 'p') {
       var random_number = Math.floor(Math.random() * 30) + 1;
       banner_img = banner_img + random_number + ".png";
   }
   
   %>

   这样如果想设置随机图,不需要写图片url就好,如果想要固定某个图片,完整写上路径即可

5. 如果想更换图片主题,直接将新图片集命名为new文件就好

内嵌网页

可以设置网易云音乐播放插件和其他内置插件,或者内置一个网页,一段html都可以