10 分钟带你免费搭建一个属于自己的博客

苏生不惑

发布于 2022-03-17 11:41:24

8430

发布于 2022-03-17 11:41:24

文章被收录于专栏：苏生不惑苏生不惑

苏生不惑第328篇原创文章。

之前的文章又发现几个有意思的网站 留言区有人问能不能整理个我推荐过网站的入口，于是我搭建了个博客将之前分享的上百个网站整理起来。

博客地址https://blog-susheng.vercel.app ，注意在微信里打不开，需要复制到浏览器打开，这个博客是免费的，今天就带大家10分钟免费搭建一个自己的博客。

安装 nodejs

之前文章京东每天自动签到领京豆 已经用过nodejs了，从https://nodejs.org/zh-cn/ 下载直接安装，安装后打开命令行能看到版本号就说明安装成功了。

λ node
Welcome to Node.js v14.17.1.
Type ".help" for more information.

安装 docsify

docsify可以快速帮你生成文档网站，在命令行输入npm i docsify-cli -g安装 docsify ，然后docsify init ./docs 初始化项目，官网文档也写得很清楚了 https://docsify.js.org/#/zh-cn/ ，目录结构如下：

λ ls docs
_coverpage.md  _navbar.md  _sidebar.md  about.md  blog/  index.html  README.md  wechat/

index.html 为入口文件，README.md 为首页文件，.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件。

接着输入docsify serve docs 启动一个本地服务器，可以实时预览效果，默认访问地址 http://localhost:3000/ ，使用markdown语法修改README.md文件即可看到效果：

关于markdown的使用可以在这个网站练习 https://md2pdf.netlify.app/ ，10分钟就能学会，本地用Typora编辑器。

我们需要新建文件_sidebar.md，用于展示侧边栏，index.html配置里加上loadSidebar: true,就行了，一个本地博客就这样搭建完了，是不很简单。

上传到GitHub

在本地修改测试没问题后将博客发布到GitHub上，这样就可以让其他人访问你的博客了，注册GitHub账号就不说了，新建一个仓库把本地文件上传到repo，然后打开setting的GitHub Pages ，在Source选择main branch / docs ，保存过几分钟就能生效，博客就能访问了。

由于github.io域名访问较慢，我们再同步到https://vercel.com/dashboard ，用GitHub账号登陆后导入你的GitHub博客仓库。

自定义一个博客名字，选择构建的根目录ROOT DIRECTORY为 docs。

deploy后等待会就有自己的vercel博客地址了，访问速度还行，之后修改博客文件上传到GitHub就能在vercel上看到效果，我顺便将之前下载的部分公众号历史文章一键批量下载微信公众号文章内容/图片/封面/视频/音频，支持导出html和pdf格式，包含阅读数/点赞数/在看数 也放在博客上。

问题

这里整理几个搭建博客可能遇到的问题。

图片处理如果使用本地图片，Typora编辑器可以配合PicGo或者upgit上传图片到GitHub，如果使用第三方图床的图片提示403不显示，修改index.html加入代码<meta name="referrer" content="no-referrer" />。

2.GitHub 打不开

国外网站GitHub有时候访问慢甚至打不开，可以使用这个软件https://gitee.com/docmirror/dev-sidecar，如果不想安装软件也可以自己修改host https://ipaddress.com/website/github.com ，hosts文件位于 C:\Windows\System32\drivers\etc ，如果修改失败需要设置下权限。

3.博客配置

需要调整博客改文件index.html里的window.$docsify就行，我这里只加了侧边栏，搜索栏。

window.$docsify = {
      name: '苏生不惑的博客',
      loadSidebar: true,
      subMaxLevel: 2,
      loadNavbar: true,
      repo: 'https://github.com/docsifyjs/docsify/', 
      maxLevel: 4,
      auto2top: true,
      formatUpdated: '{MM}/{DD} {HH}:{mm}',
      count:{
          countable:true,
          fontsize:'0.9em',
          color:'rgb(90,90,90)',
          language:'chinese'
        },
    search: {
      maxAge: 86400000, // 过期时间，单位毫秒，默认一天
      paths: 'auto',
      // 支持本地化
      placeholder: {
        '/zh-cn/': '搜索',
        '/': '输入关键词搜索'
      },
      // 支持本地化
      noData: {
        '/zh-cn/': '找不到结果',
        '/': 'No Results'
      },
      // 搜索标题的最大层级, 1 - 6
      depth: 2,
}

搜索效果还行：