Notion-Hugo

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #go #golang #linux #macos #windows #cli #kubernetes #awesome-list #pytorch #ios

(★ 192)

Use Notion as the CMS for your Hugo site

File Explorer

Download Latest Version (.zip)

- - automerge.yml
  - cd.yml
  - ci.yml
- dependabot.yml
- FUNDING.yml
- default.md
- posts.md
- - config.toml
  - markup.toml
  - params.toml
  - permalinks.toml
- - config.toml
  - languages.toml
  - markup.toml
  - mediaTypes.toml
  - outputFormats.toml
  - outputs.toml
  - pagination.toml
  - params.toml
  - privacy.toml
  - sitemap.toml
  - taxonomies.toml
- - Markdown-33dbd8d965f74930a804b8b50f375cbb.md
- .gitkeep
- About-45eb121158b9489480ec000fd25c812b.md
- .gitkeep
- api.ts
- tsconfig.json
- - math.html
  - notion-unsupported-block.html
- .gitkeep
- - md.ts
  - notion-to-md.ts
  - notion.ts
  - types.ts
- config.ts
- file.ts
- helpers.ts
- index.ts
- render.ts
- sh.ts
- .gitkeep
- ananke
- DoIt
.gitignore
.gitmodules
.prettierrc
LICENSE
notion-hugo.config.ts
package-lock.json
package.json
README.md
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Notion-Hugo

![image](https://user-images.githubusercontent.com/52968553/188502839-1de28ae0-6111-4387-99fe-fbc7d87dbc4c.png)

Notion-Hugo allows you to use [Notion](https://www.notion.so/) as your CMS and deploy your pages as a static website with [Hugo](https://gohugo.io/). So you have the full power of Notion for creating new content, with Hugo and its wonderful [ecosystem of themes](https://themes.gohugo.io/) take care of the rest for you.

Notion-Hugo deploys your website to Cloudflare Pages, which has a generous free tier and is easy to set up. Notion-Hugo also uses [Functions](https://developers.cloudflare.com/pages/functions/) and [KV](https://developers.cloudflare.com/kv/) to power your website. Register a [Cloudflare account](https://dash.cloudflare.com/sign-up) and be ready to go.

## Get Started

### Create a new GitHub repository from this template

Click the green **Use this template** button in the upper-right corner to create your repo from this template. Choose **public** for the repository visibility.

### Create a Notion integration

Visit [my integrations](https://www.notion.so/my-integrations) and login with your Notion account.

Click on **Create new integration** to create a new internal integration.

In the capabilities section, select **Read Content** and **Read user information including email address**. The **Read Content** permission is necessary for Notion-Hugo to pull your Notion content, and the **Read user information including email address** permission is used to fill front matters with author information. Notion-Hugo does not collect any of your information.

Click the submit button to finish creating the Notion integration.

### Setup secrets for GitHub Action

Copy the Internal Integration Token.

Navigate to the GitHub repo you just created, click on **Settings** -> **Secrets** -> **Actions**.

Click the **New Repository Secret** button on the top right.

Add a new secret with name `NOTION_TOKEN`, paste the copied token into the secret field. Click the green **Add secret** button to save the change.

### Duplicate the Notion Template

Duplicate this [Notion Template](https://pcloud.notion.site/Notion-DoIt-04bcc51cfe4c49938229c35e4f0a6fb6
) into your own workspace.

### Add connection to the Notion Page

Visit the page you just duplicated, click the ellipsis button on the top right and add the integration you just created as a connection.

### Configure you Hugo site

On the page you just shared with the integration, click on the **share** button again, then click the **Copy link** button on the bottom right to copy the link to this page.

Now navigate back to your GitHub repository, open the `notion-hugo.config.ts` file, click to edit the file.

Replace the `page_url` with the link you just copied.

Click the commit changes button at the bottom to save the file.

### Deploy to Cloudflare Pages

Navigate to the [Cloudflare Pages](https://dash.cloudflare.com/pages) dashboard, click the **Workers & Pages** tab on the left, then click the **Create** button, then select the **Pages** tab, and click the **Connect to Git** button. Choose Notion-Hugo from the repository list, then click the **Begin Setup** button.

Fill in the build settings as follows:

- Build command: `npm install; npm start; hugo`
- Build output directory: `public`
- Environment variables:
  - `HUGO_VERSION`: `0.140.0` (fill in the latest version of Hugo that you can find [here](https://github.com/gohugoio/hugo/releases))
  - `NODE_VERSION`: `22.12.0` (fill in the latest version of Node.js that you can find [here](https://nodejs.org/en/download))
  - `NOTION_TOKEN`: `secret_token` (fill in the token you copied from the Notion integration)

Click the **Save and Deploy** button to deploy your website.

Now we need to add a KV namespace for the Cloudflare Functions. Navigate to the **Storage & Database** tab on the left, then click the **KV** tab, then click the **+ Create** button to create a new namespace. You can name it whatever you like.

Now, navigate to **Workers & Pages** > **your_project** > **Settings** > **Bindings**, add a new **KV Namespace** binding, with **Variable name** set to `KV` and the **KV namespace** set to the namespace you just created. Click the **Save** button to save the changes.

Finally, we need to configure the baseURL. Visit the **Deployments** tab to check the domain of your website (in this case, it is `https://notion-hugo-example.pages.dev`).

Navigate back to your GitHub repository, change the `base_url` in [`notion-hugo.config.ts`](https://github.com/HEIGE-PCloud/Notion-Hugo/blob/main/notion-hugo.config.ts) to the domain of your website. Also update the `baseURL` in [`config/_default/config.toml`](https://github.com/HEIGE-PCloud/Notion-Hugo/blob/main/config/_default/config.toml) to this value. Click the commit changes button at the bottom to save the file.

Congratulations! Your website is now live at the domain you just configured.

### Next steps

Pick a [Hugo theme](https://themes.gohugo.io/) you like, and add it to your repository. You can customize the theme to your liking.

Use a custom domain for your website. You can add a custom domain in the Cloudflare Pages dashboard. See the [Cloudflare documentation](https://developers.cloudflare.com/pages/configuration/custom-domains/) for more information. The baseURL needs to be updated after changing the domain.

## FAQ

### Does Notion-Hugo sync with my Notion?

Yes. By default Notion-Hugo syncs with your Notion every midnight. Any updated content will be committed to the repository. You can change the schedule in the `.github/workflows/cd.yml` file.

```yaml
name: CD
on:
  schedule:
    - cron: '0 0 * * *'
```

### How do I manually sync with Notion?

You can trigger the CD workflow manually by navigating to the **Actions** tab in your repository, then click the **CD** workflow, then click the **Run workflow** button to trigger the workflow.

Notion-Hugo

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Notion-Hugo

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README