参考：https://github.com/Rock-Candy-Tea/hexo-circle-of-friends

github部署

  • fork友链朋友圈的项目仓库，地址：https://github.com/Rock-Candy-Tea/hexo-circle-of-friends

  • 编辑/hexo_circle_of_friends/fc_settings.yaml文件，需要修改的配置如下：

    1
    2
    LINK:
        - {link: "https://fulsun.github.io/link/", theme: "butterfly"}  # link改为你的友链页地址，theme选择你的主题

  • 然后点击仓库的Settings-->Secrets-->New repository secret

  • 添加4个环境变量secret：

    • GH_NAME：github名称，也就是你的用户名

    • GH_EMAIL：github邮箱，填写你注册github的邮箱

    • STORAGE_TYPE：存储方式，填写sqlite

    • GH_TOKEN：github访问token，获取方式，请参考官方文档，其中，Select scopes选择repo和workflow。

vercel部署

  • 前往vercel官网，直接用github创建账号并用手机号绑定。

  • 点击New Project新建项目，找到Import Git Repository，应该可以看见你刚刚fork的仓库，点击Import。

  • 然后点击Deploy，回到首页，等待一会，应该会部署完成。

  • 添加vercel环境变量，进入刚才创建的项目主页，点击Settings-->Environment Variables

  • 与前面的secret相同，添加GH_NAME、GH_EMAIL、GH_TOKEN，此外，还需要添加VERCEL_ACCESS_TOKEN

  • VERCEL_ACCESS_TOKEN，获取方式: 点击vercel页面右上角的Settings-->Tokens--->Create

  • 随便输入一个名称后，点击CREATE TOKEN，复制生成的token，添加到vercel环境变量中即可

  • 复制token,回到项目，添加VERCEL_ACCESS_TOKEN

触发action

  • 接下来，回到github，启用fork后仓库的github action，点击Actions-->I understand my workflows, go ahead and enable them

  • 之后点击update-friends-posts并启用workflow

  • 然后点击Run workflow--->Run workflow进行第一次运行

  • 等待运行完毕后，仓库应该会上传data.db，并且vercel也会同步更新。

  • 前往vercel，在项目中找到DOMAINS下面的地址，如：https://hexo-friendcircle4-api.vercel.app， （注：本来只需要这个地址，但由于vercel被墙，需要绑定自定义域名后，使用自定义域名的地址）。

  • 在这个地址后面拼接/all尝试访问，出现数据就说明配置成功，这个地址就是前端所需的api地址。

hexo部署页面

  • 新建一个页面，比如hexo在博客根目录使用命令

    1
    hexo new page fcircle

  • 可以看到source/fcircle/index.md 文件，打开该文件，粘贴以下内容（注意修改api地址）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    ---
    title: 朋友圈2
    date: 2022-01-29 15:23:17
    comments: false
    ---

    <div id="hexo-circle-of-friends-root"></div>
    <script>
        let UserConfig = {
            // 填写你的api地址
            private_api_url: 'https://fcircle.fulsun.ml/',
            // 点击加载更多时，一次最多加载几篇文章，默认10
            page_turning_number: 10,
            // 头像加载失败时，默认头像地址
            error_img: 'https://sdn.geekzu.org/avatar/57d8260dfb55501c37dde588e7c3852c',
            // 进入页面时第一次的排序规则
            sort_rule: 'created'
        }
    </script>

    <script type="text/javascript" src="https://npm.elemecdn.com/fcircle-theme-yyyz@1.0.5/dist/app.min.js"></script>
    <script type="text/javascript" src="https://npm.elemecdn.com/fcircle-theme-yyyz@1.0.5/dist/bundle.js"></script>