{"id":24583574,"url":"https://github.com/programming-with-love/curly-succotash","last_synced_at":"2025-04-28T10:39:10.876Z","repository":{"id":35439270,"uuid":"162436131","full_name":"Programming-With-Love/curly-succotash","owner":"Programming-With-Love","description":":star:一个基于最新gatsby构建的简洁好看的静态博客，a neweast and beautiful blog starter,build by gatsby","archived":false,"fork":false,"pushed_at":"2023-02-04T05:34:37.000Z","size":43248,"stargazers_count":20,"open_issues_count":12,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T08:41:33.464Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://zido.site","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Programming-With-Love.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-19T12:44:18.000Z","updated_at":"2022-11-26T16:55:04.000Z","dependencies_parsed_at":"2023-01-15T21:15:56.844Z","dependency_job_id":null,"html_url":"https://github.com/Programming-With-Love/curly-succotash","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programming-With-Love%2Fcurly-succotash","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programming-With-Love%2Fcurly-succotash/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programming-With-Love%2Fcurly-succotash/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Programming-With-Love%2Fcurly-succotash/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Programming-With-Love","download_url":"https://codeload.github.com/Programming-With-Love/curly-succotash/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251296655,"owners_count":21566650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-24T04:47:29.208Z","updated_at":"2025-04-28T10:39:10.835Z","avatar_url":"https://github.com/Programming-With-Love.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# curly-succotash\n\n一个最新搭建并且将一直保持更新的基于 gatsby 的静态博客。\n\n- [示例博客](https://curly.zido.site)\n- [zido 的个人博客](https://www.zido.site)\n\n## 特性\n\n- react/redux/单页面\n\n- google/百度搜索统计\n\n- seo 优化\n\n- 美观大方\n\n- typescript/sass\n\n- 自带辅助工具，用于生成博文\n\n- travis 自动集成，自动部署博客\n\n## 截图\n\n![截图](./docs/demo1.png)\n![截图](./docs/demo2.png)\n![截图](./docs/demo3.png)\n\n\n## 注意\n\n本博客推荐使用 github-pages 等静态服务部署（教程见下文）。当然你也可以使用任何服务器部署\n\n无论如何都需要注意如下几点：\n\n- 不论使用何种方式部署项目，都需要使用根目录(`/`)暴露页面地址。也即是类似`https://zido.site/`这样的地址访问首页，不能使用任何前缀，目前不支持。如果使用 github-pages 部署，不使用自定义域名的情况下，项目名一定要是`${用户名}.github.io`，这是 github-pages 服务的规则。这之后才能使用`http://${用户名}.github.io`进行访问。具体细节请查看 github-pages 说明\n\n- 本项目为单人博客，暂时不可用作团队/多人博客(无多作者配置)。\n\n- 在编写工作配置时请务必确保当前分支**不在**master上\n\n## 使用\n\n### 获取源代码\n\n克隆仓库：执行命令`git clone --depth 1 https://github.com/zidoshare/curly-succotash.git`。\n\n\u003e 也可以直接 fork 本仓库，执行命令:`git clone https://github.com/zidoshare/curly-succotash.git`\n\n`cd culry-succotash`\n\n`npm install` 或者 `yarn`安装依赖\n\n### 预览博客\n\n执行 `npm run start` 或者 `yarn start`。访问 [http://localhost:8000](http://localhost:8000)。即可看到示例，如果没有任何问题，那么本地的样子应该与[Demo](https://curly.zido.site)保持一致。\n\n### 修改配置\n\n配置文件位置主要有两个，分别是：`gatsby-config.js`和`data/data.json`。分别用于配置网站元信息和作者信息\n\n`gatsby-config.js`: 作出如下配置即可\n\n```javascript\nconst config = {\n  siteMetadata: {\n    // 博客名\n    title: `zido的个人博客`,\n    short_name: `zido的个人博客`,\n    start_url: `/`,\n    icon: `data/avatar.jpg`,\n    //博客简介\n    description: `前后端全栈分享，java/js/golang`,\n    //网站url地址，如果不是自定义域名而是采用github-pages等静态地址，请使用`${用户名}.github.io`\n    siteUrl: `https://www.zido.site`,\n  },\n  analytics: {\n    google: {\n      trackingId: 'UA-120357572-1', //不想接入google统计请求空\n    },\n    baidu: {\n      siteId: '4b78d088162a5bab97170b43a565bb06', //不想接入百度统计请求空\n    },\n  },\n}\n```\n\n#### 如何获取 google 统计 id？\n\n登陆 google 统计网站 [https://analytics.google.com](https://analytics.google.com)。点击 `管理`-\u003e`账号`-\u003e`用户`-\u003e翻到最下面即可知道自己的 google 统计 id。\n\n#### 如何获取百度统计 id？\n\n登陆百度统计网站 [tongji.baidu.com](tongji.baidu.com)。点击 `管理`-\u003e`网站列表`-\u003e`自有网站`-\u003e`获取代码`。看到几行如下的代码：\n\n```html\n\u003cscript\u003e\n  var _hmt = _hmt || []\n  ;(function() {\n    var hm = document.createElement('script')\n    hm.src = 'https://hm.baidu.com/hm.js?4b78d088162a5bab97170b43a565bb06'\n    var s = document.getElementsByTagName('script')[0]\n    s.parentNode.insertBefore(hm, s)\n  })()\n\u003c/script\u003e\n```\n\n其中的`4b78d088162a5bab97170b43a565bb06`就是你的百度统计 id。\n\n`data/data.json`: 作出如下配置即可\n\n```json\n{\n  \"author\": {\n    \"name\": \"作者名\",\n    \"avatar\": \"作者头像路径（图片务必放在data目录下）\"\n  },\n  \"speech\": [\"页头滚动文字\", \"使用数组格式\", \"任意长度\"],\n  \"gitment\": {\n    \"owner\": \"github用户名\",\n    \"repo\": \"github用户仓库\",\n    \"oauth\": {\n      \"client_id\": \"github oauth认证id\",\n      \"client_secret\": \"github oauth认证密钥\"\n    },\n    \"crossServer\": \"认证跨域服务器（如果不了解，请不要更改。默认服务器如过失效，请查阅本仓库，一般会及时补上最新的）\"\n  },\n  \"menu\": [\n    {\n      \"path\": \"/about\",\n      \"name\": \"关于我\"\n    },\n    {\n      \"path\": \"http://github.com/zidoshare\",\n      \"name\": \"github\"\n    }\n  ]\n}\n```\n\ngitment 字段用于配置文章评论，会出现在所有 markdown 文档页面下。如：`博文`，`通过markdown文章自定义的页面`\n\n`menu` 为附加菜单,如果是内部连接，请务必以`/`开头，否则一律视为外部链接\n\n#### 如何获取 github oauth\n\n进入并登陆 github，`用户`-\u003e`settings`-\u003e`developer settings`（[传送门](https://github.com/settings/developers)直达）。点击`new Oauth App`,添加相关资料。\n本人填写如下：\n\n```\nApplication name: zido's blog\nHomepage URL: https://www.zido.site\nApplication description: blog build by gatsby 2.0\nAuthorization callback URL: https://www.zido.site\n```\n\n点击保存即可看到相关字段，填写到配置中即可\n\n#### 关于认证跨域服务器地址（crossServer 字段）\n\ngithub oauth 需要跨域连接，但静态页面无法配置跨域，所以需要一个中间服务器进行跨域代理。而原本的 gitment 项目不再维护，原作者的跨域服务器 https 证书过期，有热心 githuber 提供了自己搭建的跨域中转地址。详情见[此 issues](https://github.com/imsun/gitment/issues/170)。看到有人搭建了，本着懒人策略就懒得搭建了，但是为了后续可能出现的影响使用的问题，fork 了原 gitment 项目，在设置中添加了 crossServer 字段让用户能够选择不同的跨域服务器。\n\n\u003e 如果有人觉得不错，也可以直接使用，`npm install --save z-gitment`安装即可，[项目地址](https://github.com/zidoshare/gitment.git)。\n\n### 自定义域名\n\n\u003e 不是自定义域名并在各个代码托管服务中使用 gh-pages 服务（例如 github,coding,码云等）搭建本博客的请务必删除 `static/CNAME` 文件。\n\n进入 github 仓库，`settings` -\u003e 首页下翻找到`Github pages`项，设置`Source` 为`master branch`\n\n修改 statc/CNAME 文件中的地址为你的 url 地址。\n\n### 编写文章\n\n\u003e 你可以删除三篇示例文章\n\n执行 `yarn generate` 或者 `npm run generate`，生成文章模板，会提示填写文章名等信息，按照提示填写即可。\n\n文章生成完毕后，打开生成的 markdown 文件。\n\n**你必须修改 image 字段**，可以选择删除，这样会使用默认的`data/headers/`下面的图片，你可以添加更多的图片进去（命名无要求），从而让你的博客有更多的图片自动选择，请注意，在你每一次构建之后，文章对应的图片都会被修改（因为是随机的）。\n\n草稿文章将会被隐藏，对应字段是`draft`。\u003cdel\u003e\u003cfont color=\"#fff\"\u003e_悄悄告诉你，通过某个彩蛋可以找到这些文章_\u003c/font\u003e\u003c/del\u003e\n\n原创文章会被标注原创标示，请谨慎使用，对应字段是`origin`。\n\n之后，删除默认内容，即可开始你的创作\n\n### 创建页面\n\n#### 使用 markdown 创建页面\n\n你只需要在`data`目录下的`blog`文件夹之外的任意路径，创建 markdown 文件即可，参考`data/about.md`。按照路径进行 url 映射，例如`data/about.md`映射到`/about`,`data/about/a.md`-\u003e`/about/a`,其中，如果文件命名为`index.md`，则使用上层路径，根目录不要使用 `index.md`命名。\n\n使用这种方式的markdown文件本质与博文没有区别，但是博客内部逻辑会将其与博文分开，单独构建为页面。你依然可以像文章一样设置tag，image等信息。只会显示，不会参与博文相关逻辑。\n\n#### 使用代码创建页面\n\n\u003e 注意，使用此方式，你需要了解typescript/react等知识\n\n如果只是简单的静态页面。直接在`src/pages`创建`tsx`文件即可，与正常react页面开发无太大区别。\n\n如果需要数据交互，请参考[gatsby官方文档](https://www.gatsbyjs.org/tutorial/)\n\n### 部署博客\n\n请务必确保当前分支**不在gh-pages**上\n\n#### 使用项目自带 github action 自动集成\n\n\u003e 请务必确认`./github/workflows/deploy.yml`配置文件是否正确编写\n\n项目默认使用build分支作为构建分支,此分支专门用于在dev分支上编写完相关博文或配置时，提交给build分支，以让travis进行自动集成。\n\n自动集成博客流程：\n\n```\n编写项目-\u003e github action 捕捉到提交-\u003e自动构建并部署到gh-pages分支。\n```\n\n当然你可以显式的修改配置文件，以让它能够适应你的部署方式。\n\n##### 配置github action\n\n本地 bash 执行 `ssh-keygen -t rsa -b 4096 -C example@gmail.com` \n\u003e 确定一下，改为你自己的邮箱。 另外 windows 上可以使用 `git-bash` 执行此命令\n\n接下来别急按回车：\n```shell\nEnter file in which to save the key:\n```\n在这里填入任何一个名字，比如我这里填写的 `curly_deploy_token`。之后一直回车到结束。\n\n* `cat curly_deploy_token.pub` 将输出的内容复制出来添加到你仓库设置下的`Deploy keys`里。\n* `cat curly_deploy_token` 将输出的内容复制出来添加到你仓库设置下的`Secrets`中。\n\n这样设置之后，你在dev分支，直接提交代码就能实现自动部署。\n\n提交之后喝杯咖啡，等待travis自动构建完成。\n\n#### 自行构建集成说明\n\n不推荐自行构建集成。所以也就不提供完整的步骤，只做简单说明：运行`npm run build`等待构建,`public/`为构建出来的包,将public提交到静态服务分支即可。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramming-with-love%2Fcurly-succotash","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprogramming-with-love%2Fcurly-succotash","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprogramming-with-love%2Fcurly-succotash/lists"}