快速搭建博客，无需编写一行代码！

前言

读前须知：这篇博客可能会花费你2个小时左右来进行阅读和操作。阅读并操作完之后，你将会拥有自己的博客工作流，并且完全免费。

这个工作流的最终目标：使写博客的流程尽量简单，同时使博客园的界面变得美观。不用再担心图床挂掉的问题。访问速度有所保障。

所使用的工具：博客园（博客展示平台），Github（作为图床），jsDelivr（CDN加速图片的显示），Typora（本地Markdown编写工具），PicGo（图片上传工具）

注意！全程不需要写一行代码，只需要点一点鼠标，填一下必要的参数就能完成。

美化你的博客园

博客园是一个非常不错的博客平台，但很多人都被它的90年代的皮肤给劝退了。

但是，博客园是可以自定义皮肤的！

皮肤推荐

这里推荐几个我觉得不错的皮肤：

Cnblogs-Theme-SimpleMemory

由BNDong大佬基于博皮“SimpleMemory”修改，页面效果展示

image-20200613114126504

cnblogs-theme-silence

由esofar大佬基于博皮“Custom”修改，页面效果展示

image-20200613114904248

还有一款主题是Sakura——喜欢二次元的朋友可以看看。但由于这款主题目前无法适配手机，并且有每天只能发布一篇博文的bug，我并不推荐，感兴趣的朋友可以自己搜索。

具体美化步骤

博客园申请JS权限

首先你要在博客园申请JS权限：管理 ---》设置----》侧边栏公告---》申请JS权限

写申请理由注意措辞！，措辞委婉一点都能通过。

GitHub下载你想要的博客园皮肤

这里我使用的是上文提到的Silence

下载我就不多说了。

配置博客园皮肤

打开博客的部署文档：Silence部署文档 （如果你有看文档自己配置的能力，那可以直接跳过这一部分，以下步骤仅为参考）

第一步

下载完之后，打开./dist/themes的文件夹，可以看到三款皮肤（只是颜色不一样）：dark暗黑，default蓝色，goddess粉色。（我当然选粉色啦~）

image-20200613121106107

用记事本或者Notepad++打开，进入『设置』界面，将复制的代码粘贴到「页面定制CSS代码」文本域中。点击「保存」按钮，保存上述操作。

image-20200613123547733

第二步

打开./dist文件夹，获取主题的 JS 脚本文件silence.min.js。

image-20200613122106882

进入『文件』界面，将该文件上传到自己的博客中。上传完成后，点击文件名便可在浏览器地址栏中获取上传文件的外链

image-20200613122246233

然后复制浏览器的地址，类似如下所示：

https://blog-static.cnblogs.com/files/你的用户名/silence.min.js

然后使用<script>标签将外链包裹，生成一个网页脚本引用，类似如下所示：

<script src="https://blog-static.cnblogs.com/files/esofar/silence.min.js"></script>

进入『设置』界面，将上面生成的网页脚本引用复制到「博客侧边栏公告」文本域中。

第三步

esofar大佬还很贴心的给大家加了很多的附加功能，同时让大家可以自定义配置一些参数。

进入『设置』界面，将如下脚本代码引用 追加 到「博客侧边栏公告」文本域中，其中配置参数根据下表自行修改。

下面的代码在esofar大佬写的 Silence部署文档 中均有提到。（我这里为了方便大家，就将esofar大佬的代码粘贴过来了，有能力的朋友可以给esofar大大一个Star~）

<script type="text/javascript">
    $.silence({
        avatar: 'http://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg',
        favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
        navigation: [
            {
                title: '标签',
                url: 'https://www.cnblogs.com/esofar/tag/'
            },
            {
                title: '归档',
                url: 'https://www.cnblogs.com/esofar/p/'
            },
            {
                title: '导航',
                chilren: [
                    {
                        title: '谷歌',
                        url: 'https://www.google.com/',
                    },
                    {
                        title: '百度',
                        url: 'https://www.baidu.com/',
                    },
                ]
            },
        ],
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            license: '署名-非商业性使用-相同方式共享 4.0 国际',
            link: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
            remark: null
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
            alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
        },
        github: {
            enable: true,
            link: 'https://github.com/esofar',
	    target: '_self'
        }
    });
</script>

只要将这一段脚本，粘贴到「博客侧边栏公告」文本域中即可。

「博客侧边栏公告」文本域中最后应该有：

image-20200613123421185

最后点击「保存」

好了，到这里博客园的美化基本结束，esofar大大给的代码中配置修改请参考 Silence部署文档 。这里不过多赘述。

构建你的GitHub图床

美化已经完成了，那么我们可以开始写博客了，但是我们遇到一个问题，万一我们的博客中需要插入图片怎么办？

那自然是需要选择一个合适的图床了，我这里不进行图床的优劣对比，我的选择是用GitHub自己搭一个图床。

和上面一样，账号注册自己解决。

搭建方法十分简单，只需要创建一个仓库即可。

image-20200613124253101

（可选）创建完成后，你可以用GitHub Desktop或者用Git Bash上传一张图片，进行测试。由于篇幅原因，这里请读者自行搜索。上传完图片后，在浏览器中使用下面网址测试一下你的图片能否正常访问。

https://raw.githubusercontent.com/你的用户名/仓库名/master/图片路径
举个栗子：https://raw.githubusercontent.com/hajimeru/ImgHost/master/webServer1.png

Typora + PicGo 上传配置

下载Typora和PicGo软件，这里不过多赘述。

首先Typora的偏好设置（选择PicGo软件并设置安装路径）：

image-20200613125447603

PicGo设置：

image-20200613125607572

参数说明：

  • 设定仓库名：你的用户名/图床仓库名
  • 设定分支名：一般都用master
  • 设定Token：这里先空着，下面会说怎么获取Token
  • 指定存储路径：你上传图片后，图片在仓库里的位置。比如我设置的是img/，那么图片就会被上传到我的图床仓库/img/xxx.png
  • 设置自定义域名：这里也就是使用JsDelivr加速了。请按照下面的格式填写：
https://cdn.jsdelivr.net/gh/你的用户名/图床仓库名/图片路径
举个栗子：https://cdn.jsdelivr.net/gh/hajimeru/ImgHost/webServer1.png

Token获取

上面还有一个Token没有填写，接下来我们要获取这个Token。

在GitHub上点击「头像」，在下拉框中选择Setting

image-20200613130403574

然后在「侧边栏」中选择Developer Setting，

随后点击Generate new Token

image-20200613130613370 image-20200613130721201

然后将生成的Token，复制到PicGo中即可，然后在PicGo中点击「确定」和「设为默认图床」。

然后我们就能愉快的上传图片了！

Typora 编写Markdown文件并测试博客流

至此，工作流已经搭建完毕。

我们之后写博客，只需要在Typora中编写Markdown文件，加入遇到要上传图片的时候，我们只需要在Typora中右键图片点击上传即可。

这是我搭建这一套工作流后，写的第一篇文章，同时也想将这个过程记录并分享出来。

文章有什么问题的话，欢迎在留言中指出，我会尽力修改，谢谢！

觉得我的文章写的不错的请点个赞啦

posted @ 2020-06-13 13:22  hajimeru  阅读(439)  评论(0)    收藏  举报