最详细的个人博客搭建教程，最快5分钟快速搭建一个简约风格的博客

傻瓜式一站式教你使用githubpages搭建博客，详细记录整个过程，大家可以上手一个博客。文章每周持续更新，大家的“三连冠”就是对我最大的肯定。可以在微信搜索公众号「后端技术学院」立即阅读（一般比博客更新一两篇），开始看博客的整体效果。点击在线预览我的博客支持特色极简风格BlogPoweredByJekyll博客文章搜索自定义社交链接网站访客统计GoogleAnalytics网站分析Gitalk评论功能自定义about页面支持中文布局支持归档和标签创建博客Git仓库首先你需要在github上有自己的博客仓库，用于生成和存储博客文章。你可以直接fork我的博客仓库。这样，你马上就有了自己的博客仓库。在这里点击我的博客地址进行fork，然后你会在自己的仓库下看到新复制的仓库。所有后续操作都将在您自己的仓库中进行。版权声明：fork后，_posts文件夹下的内容是我的博文，版权归我所有。可以选择删除里面的文章换成自己的，也可以转载并附上链接注明出处。修改博客仓库名进入自己的博客仓库，将博客仓库名修改为自己的用户名。github页面在解析的时候，是在寻找username.github.io仓库名。此时如果不出意外，打开域名https://username.github.io就可以看到刚刚建的博客了。请注意将用户名替换为您自己的github用户名。点击博客配置上方的域名可以看到我的博客配置，显示的博客名也是我的。还需要更改配置的是您的博客。博客的配置文件是仓库根目录下的_config.yml文件，点击编辑即可。还需要更改如下配置：blogname和description分别是博客名和描述，随便写。这里配置博客的社交链接按钮，不匹配的不显示。我现在有知乎、邮箱、github三个账号。您可以添加任何其他内容。配置gitalk这是评论功能的配置。评论功能基于gitalk，在配置文件中找到gitalk配置项：修改规则如下：gitalk:clientID:clientSecret:repo:owner:原理是使用github的issues来评论文章。其中clientID和clientSecret需要点击这里创建，点击绿色按钮创建。成功后会得到以上两个id，修改配置。谷歌站长统计首先你需要注册一个GoogleAnalytics账号，它可以统计你博客站点的访问量、访问来源等非常丰富的网站数据。如果您不在乎，可以跳过此部分。但是我需要在配置中删除我的google_analytics:UA-XXXXXXX-X，否则统计信息将是我的。#输入你的GoogleAnalyticswebtrackingcode(e.g.UA-2110908-2)激活trackinggoogle_analytics:UA-XXXXXXXX-X下面是我网站的实时分析页面展示：由于不可描述的原因，国内注册账户可能会遇到问题，不配置也没关系。博客URL配置#你的网站URL（例如http://barryclark.github.io或http://www.barryclark.co）#用于Sitemap.xml和你的RSSfeedurl：https://yourname.github.io这里配置自己的博客地址。配置提交对_config.ymld的修改需要提交才能生效，点击下图绿色按钮提交。完毕！现在输入上面提到的博客地址，回车，你就有了自己的博客。如何写博客嗯，有一个博客。如何更新文章？文章以markdown语法编写并上传到_post文件夹中。git页面将自动从您的git存储库中拉取并解析为网页，可以立即在您的博客页面上浏览。关于文章的命名格式：博客文章必须遵循统一的命名格式yyyy-mm-dd-blogName.md比如我的博客名字是2019-11-22-create_blog_with_github_pages.md看这里，如果你只是想写Blog，后面的就不用看了。以下章节记录一些DIY过程。本地博客预览至此，我们提交的文章必须上传到github仓库才能进行预览。如果写完后想在本地浏览器中看到效果，上传也是可以的，因为不是每个人都有这样的需求。安装Ruby和DevKit从官网下载，点此下载适合系统版本的Ruby+Devkit包。安装，在弹窗中选择3gem-vruby??-v查看版本号，即表示成功。如果是在墙内，需要将安装源切换到https://gems.ruby-china.com/。墙外请无视。gemsources--addhttps://gems.ruby-china.com/--removehttps://rubygems.org/切换安装源gemsources-l查看版本bundlerinstallgeminstallbundlerinstallbundler`bundle-v查看版本bundleconfigmirror.https://rubygems.orghttps://gems.ruby-china.com`切换安装源安装jekyllgeminstalljekyllpreviewblogjekyllserver输入后打开浏览器输入localhost:4000不出意外查看博客内容。如果你不是那么成功，以下错误解决方案供参考。常见的错误是缺少某个包，如图，缺少jekyll-paginate，安装即可。geminstalljekyll-paginate如果还是提示缺少，就安装。Permissiondeniedsocket.rb:201:inbind:Permissiondenied-bind(2)for127.0.0.1:4000(Error:EACCES)这个错误一般是4000端口被占用，解决方法：netstat-ano|findstr"4000"找到占用4000端口的进程ID，查看最后一列数字，即PID=312964。打开Windows资源管理器并结束进程。$tasklist|findstr312964也可以查看进程名。如果找到结尾，同步骤3。搜索功能集成博客模板没有搜索功能，搜索功能依赖Simple-Jekyll-Search提供支持。配置search.json将这段代码复制到你博客的根目录下。此配置文件意味着您可以按博客标题、标签、时间和类别进行搜索。下载simple-jekyll-searchj文件下载整个文件夹，其中包含两个文件，simple-jekyll-search.min.js和simple-jekyll-search.js，以及根目录中的js文件夹。在要显示搜索框的页面上配置搜索框标签。我的是index.html。此页面与每个人的博客模板有关。它可能需要一点前端知识。添加以下html标签。/div>其中，下面两个选项可选，一个是使用cloudjs，一个是本地有的话就使用localjs。配置完成，打开博客，得到这样一个搜索框。搜索框样式可以更改搜索框的样式。下面介绍一种在HTML中修改CSS样式的方法。我做后端，前端是学习和销售。html插入标签样式方法社交链接模板提供的链接没有知乎链接，或者想添加自定义链接，可以通过以下方法添加。以添加知乎链接为例。链接的图片是svg格式的（我也才知道）。让我们大致了解一下svg和viewBox是什么。viewBoxviewBox属性的值是一个列表，包含4个参数min-x,min-y,width和height，用空格或逗号分隔，指定用户空间中的一个矩形区域映射到给定的元素，查看属性在-深度简单的SVG教程配置_config.ymlfooter-links:weibo:yourname#请输入你的微博个性域名https://www.weibo.com/zhihu:yourname#输入你知乎主页链接上的名字https://https://www.zhihu.com/people/修改svg-icons.html，因为svg-icons.html在footer.html中调用生成社交链接。可以看出首先调用svg-icon.html显示社交链接，所以修改_include/svg-icons.html加入zhihu链接{%ifsite.footer-links.zhihu%}