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

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

  •  1
     
  •   welcome21984 · 229 天前 · 3363 次点击
    这是一个创建于 229 天前的主题,其中的信息可能已经有所发展或是发生改变。

    💻

    新年新气象,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 条附言  ·  229 天前
    更新一下地址
    好像需要加 www 才可以访问 😅 ?
    [www.xiaosunlaoshi.fun]( http://www.xiaosunlaoshi.fun)
    第 2 条附言  ·  229 天前

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

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

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

    https://www.huhexian.com/
    admol
        11
    admol  
       229 天前
    笔记用的 notion,博客找的开源
    admol
        12
    admol  
       229 天前
    话说资料现在都是空的?
    Tink
        13
    Tink  
       229 天前 via Android
    我咋感觉有点复杂
    zaihuame
        14
    zaihuame  
       229 天前
    notion Share to web 关闭了?
    coolzjy
        15
    coolzjy  
       229 天前
    打开就劝退了,一堆 gif 图还以为是小广告。
    zaihuame
        16
    zaihuame  
       229 天前
    @zaihuame 懂了,要公共区域
    Mryang
        17
    Mryang  
       229 天前
    @welcome21984 我是直接点的正文的链接,手动添加 3w 就可以了😅
    chaleaoch
        18
    chaleaoch  
       217 天前
    @yinyanxiao 大佬 头像怎么做的? 好酷~!
    simpsonjunior
        19
    simpsonjunior  
       187 天前
    学习了!第一次打开 loading 稍微有点慢,后面就好了
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2761 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:07 · PVG 20:07 · LAX 04:07 · JFK 07:07
    ♥ Do have faith in what you're doing.