【指北】用notion搭建博客

菜鸟碎碎念

我是一个编程菜鸟，刚开始对这些东西非常不熟悉，多亏了网上的众多教程和经验帖，才让我这个小小菜鸟得以搭好这个博客。这篇指北与其说是教程，不如说是我的一个建站记录。如果有路过的大神能斧正错误，那就是我大大的荣幸！希望这篇文章能给小伙伴们一丢丢帮助吧！

Why notion ?

现在建博客的工具有很多很多。如果只是想建一个静态博客，你可以选择hugo、hexo或者只是简简单单的github page就可以满足需求了。

要是你想要动态博客，又没有什么基础，那你可以选择WordPress，网上教程一大把。

不过我采用的是notion＋github，并托管到vercel。

使用notion基于以下几点考虑：

notion支持全平台(Windows、网页、Mac、ios、安卓)。可以随时随地地码字

页面简洁美观，功能强大。特别是database功能，非常方便管理，同时支持多种views展示

支持Markdown语法

如果你也同样想用notion建博客，我们需要以下工具：

notion账号（免费账号即可）

github账号

下载git （不会可以参考：🔗廖雪峰老师的git教程）

下载node.js

VScode

注册vercel

在notion建好主页

首先你要先在自己的notion建好一个主页

❗️注意哦❗️这个主页是要分享的，要避免将一些隐私的笔记放到主页下面

主页的设计随便你，不过建议用database的画廊显示文章，会更美观。

Next.js Notion Starter Kit

要用notion建站，我们最主要的工具就是Next.js Notion Starter Kit

1、fork 仓库

登录你的GitHub，打开nextjs-notion-starter-kit ，fork到你的仓库，这样你就有一个可以任意修改的仓库啦。

2、创建文件夹

在你的电脑中创建一个文件夹，命名为blog（叫什么名字随你便，不过建议路径全是英文比较好哦~）。

3、git 操作

右键 git bash here！就会弹出一个命令行界面，依次输入下面命令


#你的GitHub的用户名
$ git config --global user.name "Your Name"  

#你的注册邮箱
$ git config --global user.email "email@example.com"  


#初始化仓库
$ git init

git 的SSH和https设置可以参考：🔗Git之SSH与HTTPS免密码配置

打开你fork之后的仓库，复制https地址，然后输入下面代码


 git clone https://github.com/your user name/nextjs-notion-starter-kit.git

这样就会把代码库下载到你的电脑中啦，你也就可以在电脑里修改代码了~

添加原作者的仓库，方面原作者更新时可以拉取


git remote add upstream https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git

git remote -v

创建 dev 分支，在分支上操作


git switch -c dev

git branch -a

修改site.config.js参数和配置vercel

用vscode打开nextjs-notion-starter-kit文件夹，打开site.config.js这个文件，把rootNotionPageId的值替换为你的notion主页的URL的最尾端的一串数字字母，类似 78fc5a4b88d74b0e824e29407e9f1ec1

点击右上角的share按钮，复制notion.so/后的一串数字，这就是NotionPageID

在 name domain 和 author的地方写上网站名、域名和作者。

如果你已经有了自己的域名，那你可以写上自己的域名

如果你想申请自己的域名，可以参考：🔗搭建个人网站（1）：申请域名

关于如何配置vercel，可以参考：🔗搭建个人网站（2）：Github和Vercel建站以及配置DNS _

部署之后会在你的项目旁边看到vercel分配的二级域名，将之填入即可。

提交代码

保存后，用VScode的终端功能，执行下列命令


#提交修改文件
git add site.config.js 

#提交注释
git commit -m "修改设置" 

#切换到main主支
git switch main

#合并dev到主支
git merge dev

#删除dev
git branch -d dev

#推送到远程仓库
git push

如果在推送或是拉取过程中出现 OpenSSL SSL_read: Connection was reset, errno 10054，尝试以下命令：


git config --global http.sslVerify "false"

之后再进行git操作。

测试及部署

在终端继续执行


npm install

npm run dev  //在端口测试

npm run deploy //部署到vercel

npm install的过程中会出现许多问题。一般如果下载不下来的话，可以用管理员权限运行cmd，在cmd输入 npm install

部署完毕之后，你就可以自由在notion写博客啦~文章放到主页下面咻的一下就能同步到网站中，很快的哦！

相关链接

廖雪峰老师的Git教程

Git教程

史上最浅显易懂的Git教程！为什么要编写这个教程？因为我在学习Git的过程中，买过书，也在网上Google了一堆Git相关的文章和教程，但令人失望的是，这些教程不是难得令人发指，就是简单得一笔带过，或者，只支离破碎地介绍Git的某几个命令，还有直接从Git手册粘贴帮助文档的，总之，初学者很难找到一个由浅入深，学完后能立刻上手的Git教程。 ...

https://www.liaoxuefeng.com/wiki/896043488029600

域名购买和vercel部署的相关教程

搭建个人网站（1）：申请域名 - Ahrisyの碎碎念

域名（Domain Name）就是大家经常输入的 xxx.com，xxx.cn 之类的网址啦，而各个教程和平台中常见的简写DNS（Domain Name Server）就是域名服务器，它搭载了网域名称系统（Domain Name System，是将域名和IP地址相互映射的系统）。当用户输入域名时，DNS就会通过将域名转换为IP地址提供给机器处理，类似于一个手机里号码簿之类的存在。 ...

https://blog.ahrisy.com/2020/08/17/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%EF%BC%881%EF%BC%89%EF%BC%9A%E7%94%B3%E8%AF%B7%E5%9F%9F%E5%90%8D/

搭建个人网站（2）：Github和Vercel建站以及配置DNS - Ahrisyの碎碎念

在购买好自定义域名之后，下一步就是去找个服务器来放置我们的网站了，但国内服务器要备案，国外的服务器又贵，既不想备案又不想花钱的话，那 GitHub Pages 是个不错的选择。但GitHub的问题在于国内访问速度很慢，如果主要是面向国内的话建议使用 Vercel （原本叫Zeit）。Github Pages的教程已经够多了，但Vercel的教程很少，所以这里主要讲如何用 GitHub + ...

https://blog.ahrisy.com/2020/08/20/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E7%BD%91%E7%AB%99%EF%BC%882%EF%BC%89%EF%BC%9AGithub%E5%92%8CVercel%E5%BB%BA%E7%AB%99%E4%BB%A5%E5%8F%8A%E9%85%8D%E7%BD%AEDNS/

Git之SSH与HTTPS免密码配置

Git之SSH与HTTPS免密码配置

Git作为当前最受欢迎的版本控制软件，使用是很频繁的。但每次使用git push等操作时都要输入密码，实在是挺麻烦的。本文对使用SSH与HTTPS两种通讯协议讨论一下免密码配置。注：这个过程在所有操作系统上都是相似的：）许多Git服务器都支持使用SSH公钥进行认证，当然也包括github。首先你需要确认一下自己是否已经拥有密钥了，默认情况下，用户的 SSH 密钥存储在其~/.ssh 目录下。进入该目录并列出其中内容，你便可以快速确认自己是否已经拥有密钥： $ cd ~/.ssh $ ls authorized_keys2 id_rsa known_hosts config id_rsa.pub 我们需要寻找一对 id_rsa 或 id_dsa 命名的文件，其中一个带 .pub 扩展名。 '.pub'文件是你的公钥，另一个则是私钥。如果没有找不到这样的文件（或者根本就没有.ssh目录），我们可以通过 ssh-keygen 程序来创建它们。 #邮箱可以随便填 $ ssh-keygen -t rsa -C "xx@xx.com" 首先 ssh-keygen 会确认密钥的存储位置和文件名（默认是 .ssh/id_rsa ）,然后他会要求你输入两次密钥口令，留空即可。所以一般选用默认，全部回车即可。接下来我们登陆到GitHub上，右上角小头像->Setting->SSH and GPG keys中，点击new SSH key。 Title：可以随便填写，但最好起的名字能让自己知道这个公钥是哪个设备的。 Key：将上面生成的.pub文件中的所有内容复制到这里。点击下面的Add SSH key即可。然后你就会发现可以免密码访问了如果服务端是自己搭建的git服务器，生成密钥公钥对的步骤是一样的。然后将生成的.pub 文件内容，导入到git服务器 /home/git/.ssh/authorized_keys 文件内，一行一个。然后你就会发现git push 不再需要密码了搭建git服务器和相关免登陆的详细步骤可参考我的另一篇手把手教你搭建git服务器上面讲了SSH方式的免密码，接下来讲一下越来越常用的HTTPS方式的免密码新建文件并保存密码 $ touch ~/.git-credentials $ vim ~/.git-credentials 添加内容 https://{username}:{passwd}@github.com 添加git配置 $ git config --global credential.helper store 查看～/.gitconfig文件变化 [credential] helper = store 然后在尝试一下git push不再在需要密码了

https://www.jianshu.com/p/b5ec092fc1d1