Jekyll2021-08-03T15:13:14+00:00https://wujun728.github.io/feed.xmlWujun’s blog个人技术公众号「Java后端技术」分享、记录、成长博客标题template2021-08-01T00:00:00+00:002021-08-01T00:00:00+00:00https://wujun728.github.io/template_blog_with_github_pages<p>博客内容简介，这里，描述模块的内容概要</p> <!-- more --> <h2 id="段落标题">段落标题</h2> <p>段落内容</p> <h2 id="段落标题-1">段落标题</h2> <p>段落内容</p> <h2 id="段落标题-2">段落标题</h2> <p>段落内容</p> <h2 id="段落标题-3">段落标题</h2> <p>段落内容</p>wujun博客内容简介，这里，描述模块的内容概要可能是最全面的github pages搭建个人博客教程2019-11-22T00:00:00+00:002019-11-22T00:00:00+00:00https://wujun728.github.io/create_blog_with_github_pages<p>作为一个程序员怎么能没有自己的个人博客呢，这里详细记录和分享我的博客搭建经验，让你轻轻松松拥有自己的博客网站。傻瓜式一站式教你用 github pages 来搭建博客，详细记录全过程，保证你能学会。</p> <p>如果你是非程序员或者不关系技术细节，只需花 3 分钟阅读前面 5 个章节内容，就能轻松拥有自己的博客。</p> <!-- more --> <h2 id="开始">开始</h2> <p>话不多说，直接上图先来看下我的博客整体效果。<a href="https://lemonchann.github.io/blog/"><strong>点击在线预览我的博客</strong></a>，个人比较喜欢这种简约的博客风格，不要花里胡哨但该有的功也都有。</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/blogPage.png" alt="blogPage" /></p> <p>下面列举这个博客具有的功能特性，其中我比较看重归档和搜索能力。</p> <h3 id="支持特性">支持特性</h3> <ul> <li> <p>简约风格博客</p> </li> <li> <p>Powered By Jekyll</p> </li> <li> <p>博客文章搜索</p> </li> <li> <p>自定义社交链接</p> </li> <li> <p>网站访客统计</p> </li> <li> <p>Google Analytics 网站分析</p> </li> <li> <p>Gitalk评论功能</p> </li> <li> <p>自定义关于about页面</p> </li> <li> <p>支持中文布局</p> </li> <li> <p>支持归档与标签</p> </li> <li> <p>支持改变主题颜色</p> </li> <li> <p>支持添加文章目录</p> </li> </ul> <h2 id="建立博客git仓库">建立博客Git仓库</h2> <p>首先你要在<a href="https://github.com/">github</a>上有自己博客仓库，用来生成和存放博客文章。你可以直接fork我的博客仓库。这样你马上有了自己的博客仓库。</p> <p><a href="https://github.com/lemonchann/lemonchann.github.io">点这里我的博客地址</a>进去点击 fork，之后在你自己的仓库下会看到刚复制的仓库，以后的操作都在你自己的仓库进行，当然想感谢我写这个教程就帮我点个 start 吧！</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/fork%E5%8D%9A%E5%AE%A2.png" alt="fork博客" /></p> <p>**版权声明： fork之后_posts文件夹内容是我的博客文章，版权归我所有。你可以选择删除里面的文章替换上自己的博客文章，如需转载需要与我联系授权 **。</p> <h2 id="修改博客仓库名称">修改博客仓库名称</h2> <p>进到你自己的博客仓库，<strong>修改博客仓库名称成你自己的用户名</strong>。因为 github page 解析的时候找的是这个 username.github.io的仓库名，<strong>这一步非常重要</strong>。</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E4%BF%AE%E6%94%B9%E4%BB%93%E5%BA%93%E5%90%8D%E7%A7%B0.png" alt="修改仓库名称" /></p> <p>此时，不出意外的话，打开域名 https://username.github.io 就能看到你刚搭建的博客了。<em>注意替换 username成你自己的github 用户名</em>。</p> <h2 id="博客配置">博客配置</h2> <p>上面点开域名看到的还是我的博客配置，显示的博客名字也是我的。还需要更改配置才是你的博客。</p> <p>博客的配置文件是仓库根目录下的_config.yml文件，直接点开它编辑。</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/config%E6%96%87%E4%BB%B6.png" alt="config文件" /></p> <p>你还需要更改以下配置：</p> <h3 id="博客名称和描述">博客名称和描述</h3> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E6%9B%B4%E6%94%B9%E5%90%8D%E7%A7%B0.png" alt="更改名称" /></p> <p>分别是博客名称和描述，自己任意写点啥。</p> <h3 id="博客社交链接">博客社交链接</h3> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E6%9B%B4%E6%94%B9%E7%A4%BE%E4%BA%A4%E9%93%BE%E6%8E%A5.png" alt="更改社交链接" /></p> <p>这里配置社交链接按钮，没配的不显示，我现在配了知乎、邮箱、github账号三个。其他你想加自己加上就可以。</p> <h3 id="配置gitalk">配置gitalk</h3> <p>这个是评论功能的配置。评论功能基于gitalk，在配置文件中找到gitalk配置项目：</p> <p>修改规则如下：</p> <div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">gitalk</span><span class="pi">:</span> <span class="na">clientID</span><span class="pi">:</span> <span class="s">&lt;你的clientID&gt;</span> <span class="na">clientSecret</span><span class="pi">:</span> <span class="s">&lt;你的clientSecret&gt;</span> <span class="na">repo</span><span class="pi">:</span> <span class="s">&lt;你的repository名称&gt;</span> <span class="na">owner</span><span class="pi">:</span> <span class="s">&lt;你的GitHub用户名&gt;</span> </code></pre></div></div> <p>原理是利用github的issues评论文章。其中clientID和clientSecret需要<a href="https://github.com/settings/applications/new">点击这里创建</a></p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E5%88%9B%E5%BB%BAgitalk%E9%89%B4%E6%9D%83app.png" alt="创建gitalk鉴权app" /></p> <p>点绿色按钮创建，成功之后会得到以上两个id，修改配置即可。</p> <h3 id="google站长统计">Google站长统计</h3> <p>首先你要去注册一个<a href="https://analytics.google.com/analytics/">Google Analytics</a>账号，它可以统计你博客网站的访问人数，访问来源等非常丰富的网站数据。如果你不在乎可以不用跳过这节。不过要把配置中我的<code class="language-plaintext highlighter-rouge">google_analytics: UA-XXXXXXX-X</code>删除，<strong>否则统计到我的去了</strong>。</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking google_analytics: UA-XXXXXXX-X </code></pre></div></div> <p>下面是我的网站实时分析页面展示：</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/google%E5%88%86%E6%9E%90%E9%A1%B5%E9%9D%A2.png" alt="google分析页面" /></p> <p>由于不可描述的原因，国内注册账号可能会遇到问题，所有不配置也没关系。</p> <h3 id="博客网址配置">博客网址配置</h3> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Your website URL (e.g. http://barryclark.github.io or http://www.barryclark.co) # Used for Sitemap.xml and your RSS feed url: https://yourname.github.io </code></pre></div></div> <p>这里配置你自己的博客地址。</p> <h3 id="配置提交">配置提交</h3> <p>对_config.ymld的修改需要提交才能生效，点下图中绿色按钮提交。</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E9%85%8D%E7%BD%AE%E6%8F%90%E4%BA%A4.png" alt="配置提交" /></p> <p><strong>done! 现在输入上面提到的博客地址，回车，你拥有了自己的博客。</strong></p> <h2 id="如何写博客">如何写博客</h2> <p>好了，博客有了。如何更新文章呢？</p> <p>文章用markdown语法，写好统一放在_post文件夹下上传，git page会自动从你的git仓库拉去解析成网页，立刻就能在你的博客网页浏览。</p> <p>关于文章的<strong>命名格式</strong>：博客文章必须按照统一的命名格式 <code class="language-plaintext highlighter-rouge">yyyy-mm-dd-blogName.md</code> 比如我这篇博客的名字是<code class="language-plaintext highlighter-rouge">2019-11-22-create_blog_with_github_pages.md</code></p> <p><strong>看到这里，如果只是简单的想写博客，后面的不看也可以了，你已经拥有了自己的博客！后面章节是记录一些DIY的过程。</strong></p> <p>另外，发现最近用我这个模板的同学越来越多，如果搭建过程中有什么问题，可以在我的公众号「后端技术学堂」讨论交流。</p> <p><img src="https://upload-images.jianshu.io/upload_images/7842464-15f939ec039690f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="公众号二维码" /></p> <h2 id="本地博客预览">本地博客预览</h2> <p>到目前为止，我们提交的文章都是必须上传到github仓库才能预览。如果你想写完在本地浏览器看一下效果在上传也是可以的，因为不是所有人都有这样的需求。</p> <h3 id="安装-ruby-和-devkit">安装 Ruby 和 DevKit</h3> <p>在官网下载，<a href="https://rubyinstaller.org/downloads/">点这里</a>下载适合系统版本的 <a href="https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.6.5-1/rubyinstaller-devkit-2.6.5-1-x64.exe">Ruby+Devkit</a> 包。安装，弹出的窗口选3</p> <p><img src="https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/%E5%AE%89%E8%A3%85ruby.PNG" alt="安装ruby" /></p> <p><code class="language-plaintext highlighter-rouge">gem -v</code> <code class="language-plaintext highlighter-rouge">ruby -v</code> 查看得到版本号就说明成功了。</p> <p>如果是在墙内，需要切换安装源到https://gems.ruby-china.com/。墙外请忽略。</p> <p><code class="language-plaintext highlighter-rouge">gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/</code> 切换安装源</p> <p><code class="language-plaintext highlighter-rouge">gem sources -l</code> 查看版本</p> <h3 id="bundler安装">bundler安装</h3> <p><code class="language-plaintext highlighter-rouge">gem install bundler</code> 安装bundler</p> <p><code class="language-plaintext highlighter-rouge">bundle -v 查看版本 bundle config mirror.https://rubygems.org https://gems.ruby-china.com</code> 切换安装源</p> <h3 id="安装jekyll">安装jekyll</h3> <p>` gem install jekyll`</p> <p><img src="https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll%E5%AE%89%E8%A3%85.PNG" alt="jekyll安装" /></p> <h3 id="预览博客">预览博客</h3> <p>` jekyll server` 输入之后打开浏览器，不出意外输入localhost:4000即可看到博客内容。</p> <p><img src="https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_server%E6%88%90%E5%8A%9F.PNG" alt="jekyll_server成功" /></p> <p>如果你没这么顺利，那以下的错误解决供参考</p> <h4 id="常见错误">常见错误</h4> <ul> <li>缺少某个包</li> </ul> <p><img src="https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_error.PNG" alt="jekyll_error" /></p> <p>如图，缺少jekyll-paginate，安装即可<code class="language-plaintext highlighter-rouge">gem install jekyll-paginate</code>若还提示缺少就装啥。</p> <p><img src="https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_server_erro%E9%94%99%E8%AF%AF2.PNG" alt="jekyll_server_erro错误2" /></p> <ul> <li> <p>权限拒绝</p> <p>socket.rb:201:in <code class="language-plaintext highlighter-rouge">bind</code> :Permission denied - bind(2) for 127.0.0.1:4000 (Error:EACCES)</p> </li> </ul> <p><img src="https://github.com/lemonchann/lemonchann.github.io/raw/master/images/2019-11-22-create_blog_with_github_pages/jekyll_error_EASSE.png" alt="jekyll_error_EASSE" /></p> <p>出现这个错误一般是4000端口被占用了，解决方法：</p> <ol> <li> <table> <tbody> <tr> <td>netstat -ano</td> <td>findstr “4000” 找到占用4000端口的进程ID</td> </tr> </tbody> </table> </li> <li> <p>查看最后一列数字就是PID=312964 <img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E6%9F%A5%E7%9C%8Bnetstat.png" alt="查看netstat" /></p> </li> <li> <p>打开windows资源管理器，结束该进程.</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86%E5%99%A8.png" alt="任务管理器" /></p> </li> <li><code class="language-plaintext highlighter-rouge">$ tasklist|findstr 312964</code>也能查看进程名，查到结束掉他同步骤3.</li> </ol> <h2 id="搜索功能集成">搜索功能集成</h2> <p>博客模板本来是没有搜索功能的，搜索功能依赖<a href="https://github.com/christian-fei/Simple-Jekyll-Search">Simple-Jekyll-Search</a>提供支持。</p> <h3 id="配置searchjson">配置search.json</h3> <p><a href="https://github.com/christian-fei/Simple-Jekyll-Search/blob/master/example/search.json">复制这份代码到你博客的根目录</a></p> <p>这个配置文件代表可以按博客的标题、标签、时间、分类搜索。</p> <h3 id="下载simple-jekyll-searchj文件">下载simple-jekyll-searchj文件</h3> <p><a href="https://github.com/christian-fei/Simple-Jekyll-Search/tree/master/example/js">下载这整个文件夹</a>，里面包含simple-jekyll-search.min.js和simple-jekyll-search.js两个文件，连同js文件夹放在你的根目录下面。</p> <h3 id="配置搜索框标签">配置搜索框标签</h3> <p>在你想展示搜索框的页面我的是index.html，这个页面和每个人的博客模板有关，可能需要一点前端知识，添加如下的html标签。</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"search-container"</span><span class="nt">&gt;</span> <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"search-input"</span> <span class="na">placeholder=</span><span class="s">"search blog posts..."</span><span class="nt">&gt;</span> <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">"results-container"</span><span class="nt">&gt;&lt;/ul&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!--script src="https://unpkg.com/simple-jekyll-search/dest/simple-jekyll-search.min.js"&gt;&lt;/script--&gt;</span> <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"/js/simple-jekyll-search.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="nb">window</span><span class="p">.</span><span class="nx">simpleJekyllSearch</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">SimpleJekyllSearch</span><span class="p">({</span> <span class="na">searchInput</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">search-input</span><span class="dl">'</span><span class="p">),</span> <span class="na">resultsContainer</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">results-container</span><span class="dl">'</span><span class="p">),</span> <span class="na">json</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/search.json</span><span class="dl">'</span><span class="p">,</span> <span class="na">searchResultTemplate</span><span class="p">:</span> <span class="dl">'</span><span class="s1">&lt;li&gt;&lt;a href="{url}?query={query}" title="{desc}"&gt;{title}&lt;/a&gt;&lt;/li&gt;</span><span class="dl">'</span><span class="p">,</span> <span class="na">noResultsText</span><span class="p">:</span> <span class="dl">'</span><span class="s1">No results found</span><span class="dl">'</span><span class="p">,</span> <span class="na">limit</span><span class="p">:</span> <span class="mi">10</span><span class="p">,</span> <span class="na">fuzzy</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="na">exclude</span><span class="p">:</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Welcome</span><span class="dl">'</span><span class="p">]</span> <span class="p">})</span> <span class="nt">&lt;/script&gt;</span> </code></pre></div></div> <p>其中，以下两个是二选一的，一个是用云端的js一个是用本地的js如果本地有的话。</p> <p><code class="language-plaintext highlighter-rouge">&lt;script src="https://unpkg.com/simple-jekyll-search/dest/simple-jekyll-search.min.js"&gt;&lt;/script--&gt; </code></p> <p><code class="language-plaintext highlighter-rouge">&lt;script src="/js/simple-jekyll-search.min.js"&gt;&lt;/script&gt;</code></p> <p>配置完成，打开博客，你得到这样一个搜索框。</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/search_block.png" alt="search_block" /></p> <h2 id="搜索框样式">搜索框样式</h2> <p>搜索框的样式是可以改变的，这里有修改HTML中CSS样式的方法，我搞后端的，前端现学现卖。</p> <p><a href="https://blog.csdn.net/u014103733/article/details/72961366">html插入标签样式方法</a></p> <h2 id="社交链接">社交链接</h2> <p>模板提供的链接没有知乎链接，或者你想增加自定义的链接，都可以通过以下方法添加。以增加zhihu链接为例</p> <p>链接的图片是svg格式的(我也刚知道)，大概了解一下什么是svg和viewBox</p> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox">viewBox</a></p> <blockquote> <p>viewBox属性的值是一个包含4个参数的列表 <code class="language-plaintext highlighter-rouge">min-x</code>, <code class="language-plaintext highlighter-rouge">min-y</code>, <code class="language-plaintext highlighter-rouge">width</code> and <code class="language-plaintext highlighter-rouge">height</code>， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素,查看属性</p> </blockquote> <p><a href="https://zhuanlan.zhihu.com/p/36138381">深入简出 SVG 教程</a></p> <h3 id="配置_configyml">配置_config.yml</h3> <div class="language-yml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">footer-links</span><span class="pi">:</span> <span class="na">weibo</span><span class="pi">:</span> <span class="s">yourname</span> <span class="c1">#请输入你的微博个性域名 https://www.weibo.com/&lt;yourname&gt;</span> <span class="na">zhihu</span><span class="pi">:</span> <span class="s">yourname</span> <span class="c1">#输入你知乎主页链接上的名字 https://https://www.zhihu.com/people/&lt;yourname&gt;</span> </code></pre></div></div> <h3 id="修改svg-iconshtml">修改svg-icons.html</h3> <p>因为footer.html中调用了svg-icons.html来生成社交链接。</p> <p>可见是先调用了svg-icon.html显示社交链接，所以修改_include/svg-icons.html增加zhihu链接</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> </code></pre></div></div> <p>上面配置内容应该都能理解，<code class="language-plaintext highlighter-rouge">viewBox</code> 指定图片大小。</p> <p>主要是<code class="language-plaintext highlighter-rouge">path d=</code> 内容的获取，这里其实是指定svg图片的内容，我们可以从 <a href="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/brands/">这里</a>获取到大部分svg素材，比如知乎的svg<a href="https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/brands/zhihu.svg">在这</a>，点<code class="language-plaintext highlighter-rouge">raw</code> 按钮查看源文件，复制<code class="language-plaintext highlighter-rouge">path d=</code>后面的内容到上面的配置即可。</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/zhihuSvg.png" alt="zhihuSvg" /></p> <h2 id="添加网站计数">添加网站计数</h2> <p>网站统计<a href="http://busuanzi.ibruce.info/">由不蒜子</a>提供支持，就是可以统计网站当前访问次数和人数。配置也非常简单，<a href="http://ibruce.info/2015/04/04/busuanzi/#more">官方指引</a>在这里。</p> <h3 id="修改页面html">修改页面html</h3> <p>想让统计显示在哪个页面，需要修改那个页面的html，增加如下内容：</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">&lt;!--不算子网站访客统计--&gt;</span> <span class="nt">&lt;script </span><span class="na">async</span> <span class="na">src=</span><span class="s">"//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"</span><span class="nt">&gt;</span> <span class="nt">&lt;/script&gt;</span> <span class="c">&lt;!-- pv的方式，单个用户连续点击n篇文章，记录n次访问量 --&gt;</span> <span class="nt">&lt;div</span> <span class="na">align=</span><span class="s">"center"</span><span class="nt">&gt;</span> <span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">"busuanzi_container_site_pv"</span> <span class="na">style=</span><span class="s">"font-family:Consolas;color:Silver;font-size:12px;"</span><span class="nt">&gt;</span> View:<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">"busuanzi_value_site_pv"</span> <span class="na">style=</span><span class="s">"font-family:Consolas;color:Silver;font-size:12px;"</span><span class="nt">&gt;&lt;/span&gt;</span> <span class="nt">&lt;/span&gt;</span> <span class="c">&lt;!-- uv的方式，单个用户连续点击n篇文章，只记录1次访客数 --&gt;</span> <span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">"busuanzi_container_site_uv"</span> <span class="na">style=</span><span class="s">"font-family:Consolas;color:Silver;font-size:12px;"</span><span class="nt">&gt;</span> User:<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">"busuanzi_value_site_uv"</span> <span class="na">style=</span><span class="s">"font-family:Consolas;color:Silver;font-size:12px;"</span><span class="nt">&gt;&lt;/span&gt;</span> <span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;/div&gt;</span> </code></pre></div></div> <h3 id="style标签说明">style标签说明</h3> <p>可以通过style标签改变字体颜色与大小。具体参考:<a href="http://xh.5156edu.com/page/z1015m9220j18754.html">html颜色表</a>和<a href="https://www.geeksforgeeks.org/html-style-attribute/">html style属性</a></p> <p>eg. <code class="language-plaintext highlighter-rouge">style="font-family:arial;color:Gainsboro;font-size:10px; text-align:right;width:200px;background-color:gray;</code></p> <h2 id="修改博客主题颜色">修改博客主题颜色</h2> <p>博客使用开源的颜色表<a href="https://yeun.github.io/open-color/">Open Color</a>，博客主题的可选颜色有：</p> <p><code class="language-plaintext highlighter-rouge">red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow</code></p> <p>修改文件<code class="language-plaintext highlighter-rouge">_sass/_variables.scss</code>，将文件中当前颜色，比如当前是 <code class="language-plaintext highlighter-rouge">grape</code> 全部替换成你想要的颜色即可。</p> <h2 id="显示文章目录">显示文章目录</h2> <p>在文章开头信息中心增加 <code class="language-plaintext highlighter-rouge">toc: true</code> 描述即可打开文章目录显示。效果如下：</p> <p><img src="https://i.loli.net/2020/07/12/TFlRj3kBdpocY9K.png" alt="文章带目录" /></p> <h2 id="如何传图片">如何传图片</h2> <p>写markdown最头疼的就是图片的插入了，推荐用<a href="https://picgo.github.io/PicGo-Doc/zh/guide/">PicGo</a>一键上传得到链接，直接可以插入markdown。</p> <p>PicGo支持图片上传github、SM.MS图床、阿里云、腾讯云等主流图床或云端。直接拖图片，上传云端、得到链接一步搞定，方便快捷。</p> <p><img src="https://raw.githubusercontent.com/lemonchann/lemonchann.github.io/master/images/2019-11-22-create_blog_with_github_pages/PicGo.png" alt="PicGo" /></p> <h2 id="其他功能">其他功能</h2> <p><a href="https://blog.csdn.net/ds19991999/article/details/81293467">小功能</a></p> <p><a href="https://blog.csdn.net/u012702547/article/details/100533763">好用的github插件</a></p> <h2 id="网站结构">网站结构</h2> <p>根目录的index.html生成blog首页</p> <p>_include/footer.html生成侧边栏</p> <p>_include/svg-icons.html生成社交头像的链接</p> <h2 id="致谢">致谢</h2> <p>感谢 <a href="https://www.jekyll.com.cn/">Jekyll</a> 提供的技术支持才能有这个博客。</p> <p>感谢 <a href="https://fromendworld.github.io/LOFFER/document/">LOFFER </a>提供的原始模板，我在其上进行的二次开发。</p> <p><strong>我的个人技术公众号「后端技术学堂」分享、记录、成长，扫码添加，一起学习，共同成长。</strong></p> <p><img src="https://upload-images.jianshu.io/upload_images/7842464-15f939ec039690f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="公众号二维码" /></p>lemonchann作为一个程序员怎么能没有自己的个人博客呢，这里详细记录和分享我的博客搭建经验，让你轻轻松松拥有自己的博客网站。傻瓜式一站式教你用 github pages 来搭建博客，详细记录全过程，保证你能学会。 如果你是非程序员或者不关系技术细节，只需花 3 分钟阅读前面 5 个章节内容，就能轻松拥有自己的博客。