Coline (connect, line) is a blog template based on the Next.js App Router development, built on the concept of lightness and simplicity of design, eschewing fancy interfaces and focusing on content creation.
- Simple, Clean: The human attention span is limited, and to keep the reader focused on the content, Coline kept the colors to a minimum, using a wide range of neutrals, with bright colors used only for specific scenes, and no information that was not relevant to the content should be present.
- Light, Fast: The human have a limited tolerance, and usually readers lose patience with a site that can't load most of its content in less than 3 seconds. Coline excels in LightHouse, with Performance > 98% and Best practice 100%.
- SEO 100%: Websites are not just for humans, they need to be for machines as well. Coline has a 100% SEO score in LightHouse. RSS is also supported, allowing readers to subscribe to the blog using an RSS reader.
- Accessibility: Not everyone is perfect, and there should be no discrimination against anyone who isn't.Coline makes it as easy as possible for people with disabilities to use. Coline has Accessibility > 90% in LightHouse.
- Writing-friendly: The content of the website is written by the author, so it is equally important to have a good writing experience. Coline integrates with Keystatic CMS to support visual editing.
- Next.js 14 (App Router)
- Vanilla Extract
- Keystatic
- Artalk
- Fuse.js
- You have registered GitHub account.
- You have registered Vercel account (optional, deployed with Vercel).
- You have registered Google Analytics (optional, analytics features).
- You have installed Artalk (optional, comment feature)
Create GitHub Token
Create Keystatic GitHub App
- The GitHub App name can be anything you want.
- Please replace blog.ixk.me with your own domain name.
- Please check the Callback URL after creation, if there is something missing, you need to add it again.
- Please keep the GitHub App Name, Client ID, Client Secret after creation, it will be used later.
Google Analytics、Artalk
- NEXT_PUBLIC_COLINE_LANGUAGE: Configuration language, optional values
zh-Hans,zh-Hant,en. - NEXT_PUBLIC_COLINE_GOOGLE_ANALYTICS: Google Analytics Measurement ID, if you don't fill in this variable, Google Analytics will be disabled.
- NEXT_PUBLIC_COLINE_ARTALK_SITE_NAME: Artalk site name, if you don't fill in this variable, Artalk will be disabled.
- NEXT_PUBLIC_COLINE_ARTALK_SERVER_URL: Artalk server address, if you don't fill in this variable, Artalk will be disabled.
- NEXT_PUBLIC_COLINE_GITHUB_REPO: GitHub repository for your site
- COLINE_GITHUB_TOKEN: GitHub Personal Access Token, the steps to create it are given above.
- KEYSTATIC_SECRET: 80-bit hex random string, which can be obtained using the
require("crypto").randomBytes(40).toString('hex')script. - KEYSTATIC_GITHUB_CLIENT_ID: GitHub Client ID, the steps to create it are given above.
- KEYSTATIC_GITHUB_CLIENT_SECRET: GitHub Client Secret, the steps to create it are given above.
- NEXT_PUBLIC_KEYSTATIC_GITHUB_APP_SLUG: GitHub App Name, the steps to create it are given above.
Initializing site project with create-next-app
pnpm dlx create-next-app --example https://github.com/syfxlin/next-theme-colineConfiguring the env file
cp .env.example .env
# Write environment variables to the .env fileLaunch project
pnpm devBuilding project
pnpm buildMany thanks to the following sites for providing design ideas for this template.
@syfxlin/next-theme-coline is written and maintained with the help of Otstar Lin and the following contributors.
Released under the Apache-2.0 License.