/ NETLIFY, 博客

利用Jasper2主题和Netlify完善个人博客

一. 更换Jekyll主题

  • 觉得有点过于单调和简单了，于是找到了命中注定：Jasper2,如下图所示：

如果也想使用这个Jasper2主题的话，最好多读读其作者的readme哦！

1.1 在git仓库中推送生成好的html文件

​ 克隆Jasper2项目（master分支）到自己本地，然后利用jekyll开启本地预览模式：bundle exec jekyll server，这里你会发现在本地的上级目录下生成一个jasper2-pages文件夹。

  • 如果是和我一样是利用username.github.io建立的仓库，那么就直接在项目中新建一个_site文件夹，并将jasper2-pages内容复制到该目录下即可。
  • 如果是利用github pages来展示自己的项目的话，那就建立一个gh-pages 分支，同时将jasper2-pages内容复制到该目录下即可。

注意：每次跟新仓库代码后，都需要重新生成一次，并替换掉_site文件夹内容！

1.2 内容替换

  • _config.yml：用来修改主页上的一些个人信息
  • about/index.md：修改关于的个人说明
  • _post：将其中的文章替换掉自己文章

1.3 前端页面的修改

ps:本人也是个前端新手，也是根据李小肥的指导才知道怎么修改前端的，给你们撒狗粮，哈哈哈！

这里就不讲修改细节部分了，主要讲述如何快速找到想要修改的代码，毕竟授人以鱼不如授人以渔嘛！

  • 进入到jasper2的展示主页，右键页面中的facebook图标点击检查,就可以看到以下界面：

  • 在这个check界面上可以看到有个social-link social-link-fb类，那么如果我们想要修改这些内容，可以直接在项目代码中全文搜索，就可以在author.html中找到咯，但是这和我们想修改图标或者是内容不符啊，那么就往这个类的上面继续找site-nav-right,这里就指向了我们想要修改的图标。
  • 如果还想修改css文件呢，可以看到上图中Styles下面中就是，还可以直接在这里修改，就可以同时在网页中预览哦！如何找这个css文件呢，旁边的screen.css:279就是，而且连行号都给你了！

二. Netlify加速访问

目前有一些提供域名解析、CDN加速的免费网站，其还可以在GitHub中挂载触发器，一旦发现GitHub Pages仓库变化了，立即同步编译发布，减少人工操作。而Netlify就是一个，当然还有Vecel这个。

经过本人的亲自实验，Jasper2这个无法在Vecel应用上（但是之前的flexible主题可以哦），毕竟Jasper2的作者都推荐你用Netlify，你还不用么！

2.1 拥有一个专属于自己的域名

如果你已经有自己的域名了，或者你不想要啥域名，直接用netlify提供的或者gitpages就挺好的，那就跳过这段吧！

  • 去阿某云买一个新鲜热乎的域名，有好多后缀可以选的，反正我是选了个便宜的，当然还有比我这个.website还low的.xyz和.top，反正看个人喜好和收入吧，毕竟是要花钱的。
  • 注意这里一定要实名注册，买完域名才能使用！

2.2 利用netlify进行加速

  • 注册：这里无论是vercel还是netlify都是可以直接关联github账户的，因此直接用你的github账户进行注册即可。
  • 添加github仓库：这里添加你的username.github.io，然后等待他发布即可。
  • 添加自己的域名，然后按照要求，去你买域名的网站设置CNAME进行关联即可。

三. 搜索引擎的个人站点入口

除了能够不翻墙被人访问自己的博客，但是别人用搜索引擎搜不到你咋办呢？这就需要让各个搜索引擎收录自己的站点咯。

3.1 搜索引擎提交个人站点的入口

  • 百度 ： https://ziyuan.baidu.com/site/index
  • 谷歌 ： https://www.google.com/webmasters/tools/home?hl=en
  • 搜狗 ： http://zhanzhang.sogou.com/index.php/dashboard/index
  • 360　： http://info.so.360.cn/site_submit.html
  • Bing ： https://www.bing.com/toolbox/webmaster/

3.2 验证站点的所有权

这里几乎每个搜索引擎都会要你验证下自己是不是提交的站点的所有者，因此需要你验证下身份。 我这里是通过添加主页的tag来进行验证的（可以添加好几个搜索引擎的哦）

<head>
    <meta name="baidu-site-verification" content="自己的百度验证码" />
    <meta name="sogou_site_verification" content="自己的搜狗验证码"/>
</head>