• 1

  • 488

  • 收藏

2021: Gatsby+Notion 构建自己的静态博客😊

8个月前

起于 2021-01-31 10:29 AM

不知从什么时候开始折腾博客的?

看Github似乎是

image-20210131103953211

或许还要再向前推几个月,这个版本提交可以看到许多是过去的内容

这里是过去的博客 sedationh.github.io/

它记录着许多

  • 自己刷着一道又一道题
  • 自己记录折腾中的经历
  • 自己曾经的快乐和生活

(竟然字数都是一样诶)

开始使用的时候太多不明白,Github,static page,hexo ... 这些对我来说都是一个又一个的黑箱子,得益于教程和封装,也让我磕磕绊绊在互联网上有了一个自己的小空间。

时间如今已经过去了一年多,这一年学会了许多,也经历了许多。

说来有趣,或许是曾经折腾blog的日子让我与Web相遇,如今大多数的探索也是在这里。

这个领域,我能够使用的工具🔧更多了,视野也更广了✌️,临近年末,趁着想输出自己的年终总结的同时,自己造一个博客,运用喜欢的技术,对内容和样式有着更多的掌控感。

五天时间

  • 从搜索资料
  • 学习css framework: bulma
  • 学习gatsby
  • 寻找数据解决方案

我给自己的deadline就是210131,所幸到今天完成了基础的布局和blog呈现

http://47.102.207.79/

使用技术

  • Gatsby做内容呈现

  • 使用Notion做内容管理

Gatsby是基于react的一个静态web解决方案,让我深切感受到其魅力的是,其成熟的生态(many plugins...,友好的开发环境,内容与开发的解耦

A core feature of Gatsby is its ability to load data from anywhere -- CMSs, Markdown, other third-party systems, even spreadsheets. This allows teams to manage their content in nearly any backend they prefer.

在探索的路上,无辄的栈: www.imwzk.com/posts/2020-… 的这篇文章启发我很多

原本打算就用着 filesystem + markdown remark来整整内容

但无意间看一个人的博客提到notion

感受到notion设计优美的同时,对于一个能够这样公开进行访问的web内容,突然产生是否可以进行爬取,搞成markdown作为我的CMS的想法💡

代码不会写,可我会搜啊

Making a Blog Using Notion, Gatsby, and Github Pages

伟大的互联网。。在git仓库中看到了他的整个的流程和设计

if __name__ == "__main__":
    print(f'- Cleaning the "{dest_path}" folder')
    try:
        shutil.rmtree(dest_path)
    except:
        pass
    os.mkdir(dest_path)

    to_markdown(root_page_id, ignore=ignore_root)

    for slug, markdown in markdown_pages.items():
        file_name = slug + '.md'
        file_path = os.path.join(dest_path, file_name)

        file = open(file_path, 'w')
        file.write(markdown)

        print('- Imported "' + file_name + '"')

    print('Done: imported ' + str(len(markdown_pages)) + ' pages.')
复制代码

通过py来进行抓取,并利用Github Actions实现舒服的自动化

这似乎已经是可以让我照着抄就完事的方案了

但plugins有没有呢?

image-20210131111626925

啊,我圆满了,使用py显然没那么前端,gatsby丰富的生态直接提供了解决方式

在理解py爬取的过程中,看到了next的解决方式 notion-blog.now.sh/blog/my-fir… ,有趣的是,第二天厕所刷知乎,看到了这位大佬用的就是这个方案,ichn.xyz/blog/how-to… 。感觉很有意思😂😂😂

bulma

网站一开始就要考虑对于移动端的适配,尽量使用一套css代码来实现。

css功力还不行,用框架来帮忙

从框架视角,自顶向下看待自己不大牢固的css,这个过程重新理清了一些概念。

对于如何实现自己想要的效果,如何搭建一个网站样式,感觉更加得心应手了。

Here is the official site: bulma.io/

墙裂推荐这个视频:scrimba.com/scrim/cvrwy… 学了一手debug

gatsby-source-notionso

结合着demo来理解如何使用

github.com/pcarion/gat…

遇到的问题基本issue都提了,不赘述了(除了令人迷惑的网络环境)

目前实现的版本还是基于人家写的代码,内容方面自己缺乏掌控,接下来要去理解和定制化自己的内容

notion

notion这个点很有意思

漂亮、优雅

高度定制化

free ... 图片\文件上传不限制个数,只限制5 MB的

内容支持太多格式了

还可以很方便的进行公开和分享,团队,家庭协作

大概感受一下

image-20210131114004386

自己的blog的内容是向外公开的

www.notion.so/Blog-270e4b… 这里可以看到

现在有太多平台,一直想有个收藏和整理的集中地,Notion看起来是个颇为完美的方案

TODO

熟悉 gatsby-source-notionso,定制化

构建部署自动化

页面相关

  • 动画
  • 夜间模式
  • 接着变漂亮😎

内容相关

MDX高度可交互

从腾讯云到阿里云的备案转入

Meeting interesting people in the open source world and seeing a variety of ideas in different personal blogs are experiences that make me love it even more.

通过一个又一个的blog,我见到了许多有趣的人。

他们或多或少影响着我。

我也希望在这里

能遇到更好的自己 :)

image-20210131114553809

结于 2021-01-31 11:36 AM

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

物联网

488

相关文章推荐

未登录头像

暂无评论