利用博客园搭建Silence主题博客，购买域名，利用 GitHub Pages 进行中继跳转

Title: 利用博客园搭建Silence主题博客，购买域名，利用 GitHub Pages 进行中继跳转

本文主要涉及：1. 使用Silence主题优化cnblogs; 2. 利用 GitHub Pages 进行中继跳转，使用个人域名访问cnblogs博客。

1.使用Silence主题优化博客园界面#

相比于CSDN，博客园的广告相对较少、内容体验比较好。但博客园的界面一直被吐槽，好在其开放了CSS接口，可供我们自行配置。因此本文利用开源的Silence主题进行优化。

1.1准备工作#

1. 首先申请博客园的博客，然后申请开通JS权限。

开通JS权限：「博客设置」 -> 设置 -> 申请开通JS权限。如下图；

2. 将Silence的主题下载到本地

将项目cnblogs-theme-silence下载到本地，并将其进行解压，文件的结构如下所示：

│  .babelrc                                                   
│  .gitignore                                                 
│  LICENSE                                                    
│  package-lock.json                                          
│  package.json                                               
│  README.md                                                  
│                                                             
├─dist                           // 编译发布目录                                      
│      silence.min.js                                          
│      silence.min.css                                                                                        
│                                                             
├─docs                           // 文档相关目录                                       
│      change.md                                              
│      logo.png                                               
│      theme_dark.png                                         
│      theme_default.png                                      
│      theme_goddess.png                                      
└─src                            // 源码存放目录                               
    │  silence.js                                             
    │  silence.less                                           
    │                                                         
    ├─images                                                  
    │      contents.png                                         
    │      follow.png                                   
    │      gotop.png                                            
    │                                                         
    └─themes                                                  
            dark.less                                         
            default.less                                      
            goddess.less                                      
                                                              

其中，dist目录中的文件是我们要使用的文件。

1.2开始部署#

1.2.1通用设置#

1. 首先打开博客园的「设置界面」；
2. 将dist目录中的silence.min.css文件内容粘贴到页面定制CSS代码的文本域中；
3. 将dist目录中的silence.min.css文件改名为silence.css，并将该文件上传到「博客园文件」中，然后点击上传后的文件名字，在浏览器地址栏中获取上传文件的外链。外链类似如下形式：

https://blog-static.cnblogs.com/files/bitleef/silence.js

4. 使用<script>标签包裹外链，使其可以被网页引用，如下所示：

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

5. 将上述代码复制粘贴到「设置界面」的博客侧边栏公告文本域中。

1.2.2个性化设置#

个性化设置主要包含侧边栏头像、favicon图标、主题模式等，其中涉及到图片链接的均需要生成外链进行引用（外链生成方式参考上述silence.css文件）。

个性化设置参考官方「配置选项」，其代码组织形式类似如下所示：

<!-- 「博客侧边栏公告」文本域中的所有代码 -->

<!-- 上传的silence.js文件 -->
<script src="https://blog-static.cnblogs.com/files/blogs/751002/silence.js"></script>

<!-- 个性化设置代码，若直接复制以下内容，将无法渲染 -->
<script type="text/javascript">
    window.$silence = {
        // avatar：左侧栏中博主头像图片配置，该配置需要图片外链，未配置则不会渲染。
        avatar: 'https://images.cnblogs.com/cnblogs_com/blogs/751002/galleries/2153431/o_220430112129_pan.jpg',
        // favicon：设置网页标题前面的小图标，未设置则使用博客园官方默认的图标。
        favicon: 'https://blog-static.cnblogs.com/files/blogs/751002/pan.ico',
        // 该配置项用来在导航栏中追加自定义菜单项。注意外链引用！！
        navbars: [
            {
                title: '标签',
                url: 'https://www.cnblogs.com/bitleef/tag/'
            },
            {
                title: '归档',
                url: 'https://www.cnblogs.com/bitleef/p/'
            },
            {
                title: '关于我',
                url: 'https://www.cnblogs.com/bitleef/p/AboutMe.html'
            }
        ],
        // github：配置项用来设置个人 Github 主页地址，会在页面左上角渲染一个 GitHub Corner 挂件，未设置则不会渲染。
        github: 'https://github.com/bitleef',
        // defaultMode：该配置项用来设置默认加载的主题模式，这里选用期间模式light
        defaultMode: 'light',
        // defaultTheme：设置默认加载的主题色彩
        defaultTheme: 'e',
        // showNavAdmin：该配置项用来控制是否显示导航栏中的「管理」菜单项
        showNavAdmin: false,
        // hljsln：该配置项用来控制是否显示代码块行号。这里选择显示代码块行号。
        hljsln: true,
        // catalog：该配置项用来生成在右侧悬浮的博文标题目录。
        catalog: {
            enable: true,
            index: false,
            active: false,
            levels: ['h2', 'h3', 'h4']
        },
        // signature：该配置项用来在每篇博文结尾处生成版权签名。
        signature: {
            enable: true,
            author: 'bitleef',
            license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
            remark: '转载请注明出处',
        },
        sponsor: {
            enable: true,
            text: 'Buy me a cup of coffee ☕.',
            wechat: 'https://images.cnblogs.com/cnblogs_com/blogs/751002/galleries/2153431/o_220430131652_WechatIMG25.png',
            alipay: 'https://images.cnblogs.com/cnblogs_com/blogs/751002/galleries/2153431/o_220430132047_WechatIMG26.png'
        }
    };
</script>

1.2.3兼容性配置#

这里参考官方的「其他配置」，主要涉及三点：

1. 「标题」处设置博客标题，注意不支持显示「子标题」;
2. 「博客皮肤」处选择标准模板custom;
3. 「禁用模板默认CSS」需要打对勾。该位置在博客设置 -> 页面定制CSS代码 -> 禁止模版默认CSS。

至此，博客的slience主题部署完毕。

2.个人域名跳转到cnblogs#

个人域名在一年多之前就购买了，并且自己也买了服务器建站，但偏离了写博客的本意。博客的本意是为了对知识的分享和利用评论系统进行友好的交流。个人建站会浪费较多精力，且没有良好的生态。因此考虑了cnblogs博客对于学习和思考进行记录。

由于cnblogs的博客域名较长且不易让人记住，考虑使用个人域名进行访问。解决思路：利用GitHub Pages进行中继跳转。

2.1准备工作#

1. 申请一个Github账号，然后建立一个名为[username].github.io的仓库，如下所示：

比如我的账户名字为bitleef，那么仓库名字就为bitleef.github.io。

2. 购买一个自己的域名，比如我在某云上买的域名为bitleef.com，如下所示：

2.2配置访问跳转#

2.2.1域名解析配置#

DNS域名解析，就是将域名bitleef.com解析为目标服务器的IP地址。我的bitleef.github.io仓库对应的服务器的ip地址为185.199.111.153。 那么我就可以将DNS解析配置为如下形式：

如何获取[username].github.io仓库服务器的地址?

方法是ping一下对应的仓库获取，如下：

$ ping bitleef.github.io
PING bitleef.github.io (185.199.111.153): 56 data bytes
64 bytes from 185.199.111.153: icmp_seq=0 ttl=50 time=69.133 ms
64 bytes from 185.199.111.153: icmp_seq=1 ttl=50 time=64.706 ms
64 bytes from 185.199.111.153: icmp_seq=2 ttl=50 time=74.243 ms
64 bytes from 185.199.111.153: icmp_seq=3 ttl=50 time=75.249 ms
64 bytes from 185.199.111.153: icmp_seq=4 ttl=50 time=83.030 ms

2.2.2Github仓库配置#

1. 首先在上述建立的仓库中建立三个文件，分别为CNAME、index.html、README.md，

github的访问逻辑如下：

当在浏览器上输入bitleef.github.io进行访问时，

1. 若仓库中只有README.md文件，那么就会呈现该文本的内容；
2. 若仓库中有index.html、README.md文件，那么就会访问index.html文件；
3. 当在2之上添加CNAME文件，就可以接受其他域名访问该仓库，而不仅仅只有[usrname].github.io才能访问该仓库。

文件具体内容如下所示：

CNAME文件内容：

CNAME文件若填写www.bitleef.com，那么只有www.bitleef.com才可以访问该仓库；若填写bitleef.com，那么bitleef.com和www.bitleef.com均可访问该仓库。因此该文件填写:

bitleef.com

Index.html文件内容:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lew's Blog</title>
    <style media="screen">
        * {
                margin: 0;
                padding: 0;
        }
    </style>
</head>
<body>
</body>
    <script type="text/javascript">
       //将这个地址修改成需要的博客地址,比如我这里改为 https://www.cnblogs.com/bitleef/
        window.location.href = "https://www.cnblogs.com/bitleef/"; 
    </script>
</html>

README.md文件内容：

README.md文件其实可有可无，但github仓库都会有一个说明文件，故这里随意填写了一下：

bitleef.github.io

2. 在仓库中设置访问域名，如下：

至此，全部设置完毕。

参考链接：

[1] Silence - 博客园主题美化-部署

[2] cnblogs-theme-silence官方部署文件

[3] 使用自己的域名跳转到其他网址(博客园,CSDN,简书,个人Blog等等)

可通过个人域名 bitleef.com或者www.bitleef.com访问该博客。