技术分享
NotionNext介绍
NotionNext操作说明
写作是最值得投资的技能
往期整理
历史归档
文章分类
文章标签
Ryan.mobi
  • 技术分享
    •   NotionNext介绍
    •   NotionNext操作说明
    •   写作是最值得投资的技能
  • 往期整理
    •   历史归档
    •   文章分类
    •   文章标签
  • 📖在VPS上部署NotionNext

    2024-11-13|2024-11-14
    Ryan
    Ryan
    password
    网址
    type
    status
    date
    slug
    summary
    tags
    category
    icon
    官方安装文档:
    VPS本地服务器 | NotionNext帮助手册
    在你的云服务器上手动部署NotionNext
    VPS本地服务器 | NotionNext帮助手册
    https://docs.tangly1024.com/article/deploy-notion-next-on-vps
     
    其他可参考安装经验,其中第一个关于lucky的使用值得参考:
    2H2G阿里云VPS搭建NotionNext | XXWWのBlog
    半小时搞定NotionNext
    2H2G阿里云VPS搭建NotionNext | XXWWのBlog
    https://www.xxww.space/article/VPS-NotionNext
    2H2G阿里云VPS搭建NotionNext | XXWWのBlog
     
     

    一、NotionNext代码下载

    1. 安装Git
      1. 💡git是一个代码托管工具,你可以用它来下载github上的代码。
        如果系统提示“yum: command not found”(比如debian最新版中),可以用apt:
     
    1. 从Github仓库拉取代码
       

      二、安装NodeJS环境

      1. 使用git下载nvm源代码
         
        1. 使用nvm安装Nodejs
          1. 💡题外话: 用 nvm list-remote 命令可查看所有可安装的nodejs版本 用 nvm ls可查看所有已安装到本地的nodejs 版本
         
        1. 安装yarn环境
          1. NodeJS 自带了 NPM(Node Package Manager),他可以用来安装打包编译NotionNext这类基于Webpack打包的项目。不过npm不太好用,这里安装一个npm升级版yarn。
         

        三、运行NotionNext

        1. 先进入NotionNext目录
          1. 安装NotionNext依赖的库
            1. 如果没有安装yarn,也可以用 npm install 命令进行安装依赖。
               
          1. 将notion_page_id设为环境变量。
            1. 环境变量文件是NotionNext目录下的.env.local,用编辑器打开后寻找并填入NOTION_PAGE_ID,记得把注释符去掉然后保存。
              如果是通过修改blog.config.js文件的方法来添加NOTION_PAGE_ID的话,则需要用yarn build编译才能生效。
               
          1. 项目编译
            1. 每次修改代码,包括修改blog.config.js文件的内容后,都需要重新执行这步骤。
           
           
          1. 启动项目
            1. 执行效果
              [root@tangly1024 NotionNext]# yarn yarn install v1.22.19 info No lockfile found. [1/4] Resolving packages... warning react-notion-x > react-use > nano-css > [email protected]: Please use @jridgewell/sourcemap-codec instead warning valine > leancloud-storage > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. warning valine > leancloud-storage > leancloud-realtime > [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. warning valine > leancloud-storage > [email protected]: Please upgrade to v7.0.2+ of superagent. We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing. See the releases tab for more information at https://github.com/visionmedia/superagent/releases. warning valine > leancloud-storage > superagent > [email protected]: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau warning valine > leancloud-storage > leancloud-realtime > @leancloud/platform-adapters-browser > @leancloud/adapters-superagent > [email protected]: Please upgrade to v7.0.2+ of superagent. We have fixed numerous issues with streams, form-data, attach(), filesystem errors not bubbling up (ENOENT on attach()), and all tests are now passing. See the releases tab for more information at https://github.com/visionmedia/superagent/releases. warning valine > leancloud-storage > leancloud-realtime > @leancloud/platform-adapters-browser > @leancloud/adapters-superagent > superagent > [email protected]: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau warning @waline/client > vue > @vue/compiler-sfc > magic-string > [email protected]: Please use @jridgewell/sourcemap-codec instead [2/4] Fetching packages... [3/4] Linking dependencies... warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x". warning "gitalk > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || 15.x.x". warning "react-facebook > [email protected]" has incorrect peer dependency "[email protected] || 16.x". warning " > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0". warning "react-notion-x > [email protected]" has incorrect peer dependency "react@^15 || ^16". warning "react-notion-x > [email protected]" has incorrect peer dependency "react-dom@^15 || ^16". warning "react-notion-x > [email protected]" has unmet peer dependency "@babel/runtime@>=7". warning "react-notion-x > react-pdf > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "eslint-config-next > @typescript-eslint/parser > @typescript-eslint/typescript-estree > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta". [4/4] Building fresh packages... success Saved lockfile. Done in 214.69s. [root@tangly1024 NotionNext]# yarn build yarn run v1.22.19 $ next build && next-sitemap --config next-sitemap.config.js info - Loaded env from /root/NotionNext/.env.local Attention: Next.js now collects completely anonymous telemetry regarding usage. This information is used to shape Next.js' roadmap and prioritize features. You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: https://nextjs.org/telemetry
              info - Checking validity of types info - Creating an optimized production build info - Compiled successfully info - Collecting page data .[请求API] from:page-paths id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:tag-static-path id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:tag-page-static-path id:02ab3b8678004aa69e9e415905ef32a5 info - Collecting page data ..[请求API] from:category-paths id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:category-paths id:02ab3b8678004aa69e9e415905ef32a5 info - Collecting page data ...[响应成功]: from:page-paths [API耗时] 1754ms info - Collecting page data .[响应成功]: from:tag-static-path [API耗时] 1736ms [响应成功]: from:tag-page-static-path [API耗时] 1714ms info - Collecting page data ..[响应成功]: from:category-paths [API耗时] 1778ms info - Collecting page data ...[响应成功]: from:category-paths [API耗时] 2140ms info - Collecting page data [ ] info - Generating static pages (0/23)[请求API] from:search-props id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:404 id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:index id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:category-index-props id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:archive-index id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:tag-index-props id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:search-props id:02ab3b8678004aa69e9e415905ef32a5 [=== ] info - Generating static pages (8/23)[响应成功]: from:tag-index-props [API耗时] 1587ms [请求API] from:search-props id:02ab3b8678004aa69e9e415905ef32a5 [响应成功]: from:404 [API耗时] 1668ms [请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5 [响应成功]: from:index [API耗时] 1774ms [响应成功]: from:search-props [API耗时] 1819ms [响应成功]: from:archive-index [API耗时] 1788ms [请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5 [响应成功]: from:search-props [API耗时] 1737ms [请求API] from:tag-props id:02ab3b8678004aa69e9e415905ef32a5 [请求API] from:category-props id:02ab3b8678004aa69e9e415905ef32a5 [ ===] info - Generating static pages (14/23)[响应成功]: from:category-index-props [API耗时] 1958ms [请求API] from:category-props id:02ab3b8678004aa69e9e415905ef32a5 [ =] info - Generating static pages (15/23)[响应成功]: from:search-props [API耗时] 1720ms [响应成功]: from:tag-props [API耗时] 1687ms [ ] info - Generating static pages (17/23)[响应成功]: from:category-props [API耗时] 1606ms [响应成功]: from:tag-props [API耗时] 1707ms [响应成功]: from:tag-props [API耗时] 1698ms [响应成功]: from:tag-props [API耗时] 1728ms [响应成功]: from:category-props [API耗时] 1730ms info - Generating static pages (23/23) info - Finalizing page optimization
              Page Size First Load JS ┌ ● / (ISR: 5 Seconds) (1930 ms) 524 B 543 kB ├ /_app 0 B 542 kB ├ ● /[...slug] 1.58 kB 544 kB ├ ○ /404 (1811 ms) 640 B 543 kB ├ ● /archive (ISR: 1 Seconds) (1806 ms) 656 B 543 kB ├ ● /category (ISR: 1 Seconds) (2097 ms) 667 B 543 kB ├ ● /category/[category] (ISR: 1 Seconds) (3373 ms) 707 B 543 kB ├ ├ /category/技术分享 (1748 ms) ├ └ /category/学习思考 (1619 ms) ├ ● /category/[category]/page/[page] 716 B 543 kB ├ λ /feed 249 B 542 kB ├ ● /page/[page] 652 B 543 kB ├ ● /search (ISR: 1 Seconds) (1944 ms) 801 B 543 kB ├ ● /search/[keyword] (ISR: 1 Seconds) (1899 ms) 678 B 543 kB ├ └ /search/NotionNext BLOG (1759 ms) ├ ● /search/[keyword]/page/[page] (ISR: 1 Seconds) (1867 ms) 687 B 543 kB ├ └ /search/NotionNext BLOG/page/1 (1735 ms) ├ ● /tag (ISR: 1 Seconds) (1606 ms) 651 B 543 kB ├ ● /tag/[tag] (ISR: 1 Seconds) (6924 ms) 679 B 543 kB ├ ├ /tag/开发 (1743 ms) ├ ├ /tag/思考 (1730 ms) ├ ├ /tag/建站 (1715 ms) ├ └ /tag/文字 (1709 ms) └ ● /tag/[tag]/page/[page] 687 B 543 kB
              • First Load JS shared by all 542 kB ├ chunks/framework-bb5c596eafb42b22.js 42.1 kB ├ chunks/main-c9bcff17d385c69a.js 28.7 kB ├ chunks/pages/_app-e8a826e85bd57a50.js 469 kB ├ chunks/webpack-de079d6da0c84f1e.js 2.32 kB └ css/02c66091ce82e882.css 31.3 kB
              λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)
              Loaded env from /root/NotionNext/.env.local Done in 113.42s. [root@tangly1024 NotionNext]# yarn start yarn run v1.22.19 $ next start ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from /root/NotionNext/.env.local
               

           
          💡
          至此,项目实际已安装完成了。但通过yarn start运行,终端中会实时打印出网站的日志,只要一退出终端,也会退出NotionNext的服务。
           

          因此,需要通过其他形式来让服务在后台运行。官网给出的第一种方法是通过nohup:

           
           

          但更好的办法是通过pm2(进程管理命令)来启动服务

          参考文章:‣
           
          1. 全局安装pm2
            1. 进入部署的NotionNext目录
              1. #“blog”可以换成其他喜欢的名字,写什么都无所谓。3000是希望使用的端口,可以换成其他未被占用的端口。
                 
                pm2常用命令、
                查询进程:pm2 list
                停止进程:pm2 stop 0 0代表的是进程id,可以通过上面的查询进程命令看到
                重启进程:pm2 restart 0 同上
                删除进程:pm2 delete 0 同上,可以把不需要的进程删掉
                 
                 
                💡

                如果重启vps之后,无法使用nvm、npm和pm2命令的话,需要重新执行安装nodejs

                终端中执行:
                 
                接着进入程序主目录更新pm2,这样就可以再次管理了
                 
                 
             

            四、安装lucky

            lucky可以代替nginx进行反向代理,通过域名来访问安装好的NotionNext,而非ip地址。lucky的好处在于可以在网页端通过图形界面来管理。
            参考了这位大佬的文章:
            2H2G阿里云VPS搭建NotionNext | XXWWのBlog
            半小时搞定NotionNext
            2H2G阿里云VPS搭建NotionNext | XXWWのBlog
            https://www.xxww.space/article/VPS-NotionNext
            2H2G阿里云VPS搭建NotionNext | XXWWのBlog
             
            📌
             
             

            配置 lucky

            1. 打开 ip:16601
            1. 登入:账号与密码都是 666
            1. 添加 SSL证书 (下发比较慢,等个 10 分钟,https 访问就不会显示不安全)
              1. notion image
            1. 添加 Web 服务
              1. notion image
            1. 修改 lucky 登入账号密码
             
             

            五、一键部署NotionNext和lucky

            每次服务器重启后,可以用pm2命令一键启动NotionNext(在3000端口)和lucky:
             
             
             
            啥都学学
            建站
            推荐
            这个博客是怎么搭建的示例文章
            Loading...
            0%
            一、NotionNext代码下载二、安装NodeJS环境三、运行NotionNext因此,需要通过其他形式来让服务在后台运行。官网给出的第一种方法是通过nohup:但更好的办法是通过pm2(进程管理命令)来启动服务如果重启vps之后,无法使用nvm、npm和pm2命令的话,需要重新执行安装nodejs四、安装lucky配置 lucky五、一键部署NotionNext和lucky
            2024-2025Ryan.

            Ryan.mobi

            Powered byNotionNext 4.7.7.
            • 关于
            Ryan
            Ryan
            一个热爱科技的非理工中年人
            欢迎来到我的博客
            =============
            操作手册
            更新记录
            联系我们