V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
welcome21984
V2EX  ›  Notion

分享一下自己利用 Notion 搭建个人主页|博客的过程

  •  1
     
  •   welcome21984 · 2021-04-23 13:13:05 +08:00 · 9308 次点击
    这是一个创建于 1091 天前的主题,其中的信息可能已经有所发展或是发生改变。

    💻

    新年新气象,2021 年,终于决定把工作室的整个工作流程和文档都搬迁到 Notion (之前使用的是语雀+滴答+微信群) 同时也决定使用用 Notion 搭建一个个人主页和博客,用来记录新一年的教学心得和所思所想

    为什么选择 Notion 作为个人主页 | 博客

    之前使用过的工具

    在之前我也使用过 Hexo 或者 WordPress 等工具来搭建自己的个人博客,但是都没有坚持下去

    • WordPress:如果使用 WordPress 搭建自己的博客的话,除了域名以外,还需要租用一台服务器或者 VPS,需要自己搞定一系列的设置,整体比较麻烦;不过优点是 wp 模板繁多,可以找到各种各样好看的设计
    • Hexo:Hexo 的好处在于不需要额外租服务器或者 vps,可以直接挂在 github 的页面上,缺点是更新比较麻烦,需要在本地写 md,再 pull 到 github
    • 现成的博客服务:CSDN,简书,知乎等 😢 说起这个,我就是满脸的泪,由于喜欢在文章里打广告的恶习,在这些平台已经被封了好几个号,实在不方便

    为什么选择 Notion

    • 简单来说,选择 Notion 就是在自由度和便利程度中间选个最折中的方案
    • 相对于其他的博客或者在线文档的服务,Notion 是目前自由度最高的,可以任意地调整页面的布局,插入和引用 database,还支持各种组件
    • 最重要是,Notion 对于 emoji 的支持程度很高!( emoji 爱好者狂喜),页面又美观

    如何建立和公开自己的个人主页

    如何建立自己的 Notion 个人主页

    • Notion 的使用逻辑基本就和常见的在线文档(语雀幕布等)差不多,支持 Markdown 语法,在页面上比国内的一些软件相对自由度要高一点,比如可以直接拖拽 block,可以通过分列来进行排版,database 可以用过 table,list,gallery 等形式展示
    • 比如下图就是我的个人主页👇 image.png 如果喜欢我的主页的话,可以 进入主页 👉 xiaosunlaoshi.fun 选择右上角的 duplicate as template 即可把模板复制到自己的主页使用啦~

    好看的 Notion 个人主页模板

    除了自己搭建以外,Notion 官方就有提供超级丰富的模板资源 👀

    👇👇👇

    这里就推荐 1 个我自己比较喜欢的模板

    Ali (一个我特别喜欢的 youtuber ) 的 2020 Annual Review 面板

    💻模板的地址在👇

    The Nordic Web

    绑定个人主页和域名

    目前 notion 官方还不支持自定义域名;所以主要是靠用户自己动手实现的✊ 主要的实现方法有 2 种:

    ❶ 简单地做一个域名跳转,但是最终显示的还是 notion 的网址,例如我的个站 xiaosunlaoshi.fun 就是这种情况 ❷ 通过 js 把 notion.so 替换成自己的域名,这样即使点开子页面,显示的也是自己的域名,不过缺点是会导致其他用户在评论和操作的时候可能会失效,具体的方法可以参考👉 https://notion.cx/post/372

    💻 通过简单的域名跳转实现用 notion 搭建个站

    💰买一个域名

    我这里使用的是阿里云 👇👇👇

    一般 .com 59 一年, .cn29 一年,如果是 top, fun, vip, xyz 这类相对小众的,一般一年只要 10 块钱左右;💰另外,如果选的是 com 域名,付款的时候记得用优惠码智能 logo 设计最快十秒出图,可以便宜到 55 元一年

    image.png

    💻 注册 cloudflare

    Here at Cloudflare, we make the Internet work the way it should. Offering CDN, DNS, DDoS protection and security, find out how we can help your site.

    注册完以后一路跟着引导添加自己的域名即可 👀 Cloudflare 是有简体中文服务的,可以在右上角把语言切换成简体中文

    💻 把域名的 dns 服务转移到 cloudflare

    这里以阿里云为例

    1. 进入控制台
    2. 在“产品与服务”里选择“域名”
    3. 找到自己的域名,选择右侧的“管理”
    4. 选择“DNS 服务器”,修改 DNS,改为 algin.ns.cloudflare.comraquel.ns.cloudflare.com

    🤞 分享 notion 主页

    在主页的右上角选择 share,可以通过“link options”选择具体的分享权限(例如,是否允许他人编辑、他人评论等),然后复制这个链接, 例如 https://www.notion.so/yplan/996164970e5a46eebd1e7e4f37b7f999

    image.png

    ⌨️在 cloudflare 设置规则把域名设置跳转到自己的 notion 主页

    选择自己的域名,然后选择“rules”或者“规则”,创建页面规则,规则如下👇👇👇 image.png

    🧐如果还是不行?

    一般域名设置改完以后需要一段时间才能生效,可以等一会再看看

    如果还是不行,可以在 cloudflare 的 dns 设置里配置一下这个👇👇👇 image.png

    ezgif.com-gif-maker 19.gif

    第 1 条附言  ·  2021-04-23 14:00:06 +08:00
    更新一下地址
    好像需要加 www 才可以访问 😅 ?
    [www.xiaosunlaoshi.fun]( http://www.xiaosunlaoshi.fun)
    第 2 条附言  ·  2021-04-23 14:00:18 +08:00

    更新一下地址 好像需要加 www才可以访问 😅 ? www.xiaosunlaoshi.fun

    21 条回复    2022-03-27 01:42:16 +08:00
    EasonC
        1
    EasonC  
       2021-04-23 13:20:41 +08:00 via iPhone
    卡在第一步购买域名,想弄一个免费的域名,有推荐吗
    welcome21984
        2
    welcome21984  
    OP
       2021-04-23 13:24:39 +08:00
    @EasonC
    1. 我买的是.fun 的域名,一年 8 块钱,真的不贵
    2. 免费的域名可以👀看看这个 👉 https://www.freenom.com/zh/freeandpaiddomains.html
    3. 最简单的方法就是在 notion 里可以把自己的 workspace 的后缀自定义,类似于 notion.so/你自定义的名字,不介意前面顶着 notion 的话,这个方法最简单
    Mryang
        3
    Mryang  
       2021-04-23 13:33:42 +08:00
    博客地址打不开哦
    yinyanxiao
        4
    yinyanxiao  
       2021-04-23 13:40:05 +08:00   ❤️ 5
    用 notion 搭建自己的博客,推荐使用 https://github.com/craigary/nobelium

    一个使用 NextJS + Notion API 实现的,部署在 Vercel 上的静态博客系统。为 Notion 和所有创作者设计。
    welcome21984
        5
    welcome21984  
    OP
       2021-04-23 13:40:54 +08:00 via iPhone
    @Mryang 哎?
    welcome21984
        6
    welcome21984  
    OP
       2021-04-23 13:41:31 +08:00 via iPhone
    @yinyanxiao 妙啊,收藏了
    thet
        7
    thet  
       2021-04-23 13:42:59 +08:00
    地址打不开
    welcome21984
        8
    welcome21984  
    OP
       2021-04-23 13:43:00 +08:00 via iPhone
    @Mryang 加上 www 试试?
    www.xiaosunlaoshi.fun
    Samuelcc
        9
    Samuelcc  
       2021-04-23 14:13:06 +08:00 via Android
    之前也想过,但是 notion 的评论不是我想要的那种评论系统。
    huhexian
        10
    huhexian  
       2021-04-23 14:36:59 +08:00
    notion 上其实有很多功能是别的博客 cms 系统没有的,挺棒的。不过 notion 搞起来更复杂,而且比较难学,我选择的是 wordpress 博客系统:

    https://www.huhexian.com/
    admol
        11
    admol  
       2021-04-23 14:46:06 +08:00
    笔记用的 notion,博客找的开源
    admol
        12
    admol  
       2021-04-23 14:47:08 +08:00
    话说资料现在都是空的?
    Tink
        13
    Tink  
       2021-04-23 15:13:32 +08:00 via Android
    我咋感觉有点复杂
    zaihuame
        14
    zaihuame  
       2021-04-23 15:21:50 +08:00
    notion Share to web 关闭了?
    coolzjy
        15
    coolzjy  
       2021-04-23 15:27:36 +08:00
    打开就劝退了,一堆 gif 图还以为是小广告。
    zaihuame
        16
    zaihuame  
       2021-04-23 15:35:46 +08:00
    @zaihuame 懂了,要公共区域
    Mryang
        17
    Mryang  
       2021-04-23 15:37:38 +08:00
    @welcome21984 我是直接点的正文的链接,手动添加 3w 就可以了😅
    chaleaoch
        18
    chaleaoch  
       2021-05-05 16:10:10 +08:00
    @yinyanxiao 大佬 头像怎么做的? 好酷~!
    simpsonjunior
        19
    simpsonjunior  
       2021-06-04 17:36:29 +08:00
    学习了!第一次打开 loading 稍微有点慢,后面就好了
    145431
        20
    145431  
       2022-03-24 13:40:34 +08:00
    牛逼呀!!我是买了域名准备用 wordpress+阿里云做一个展示型网站
    chenrui920614
        21
    chenrui920614  
       2022-03-27 01:42:16 +08:00
    说实话有点丑😓
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3183 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 13:19 · PVG 21:19 · LAX 06:19 · JFK 09:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.