ThisThis document describes how to quickly build a personal blog site, including choosing an appropriate blog framework, deployment plan and detailed directions. Through this document, you will learn the complete process of building a personal blog and quickly have your own blog website.
Overview
Traditional blog setup methods usually depend on self-built servers, virtual hosts, or traditional CMS (such as WordPress). Users are advised to manually perform environment deployment, database configuration, and security maintenance, which involves a relatively high operational threshold and significant post-maintenance costs. EdgeOne, based on edge computing and static site technology, combines Pages blog templates to deliver an innovative website creation experience for users. With the preset blog framework, you just need to modify text, images, etc., to quickly launch an exclusive personal blog—achieving actual "out-of-the-box, zero-barrier website building."
Template main features and advantages:
Fast deployment: No need to configure complex environments, just a few minutes to go live.
High performance and security: Distribute based on edge nodes, access speed is fast, strong anti-attack capability
Flexible customization: Supports customizable content structure and UI styles.
Easy-to-maintain: Content and frontend separation, supports visualization content management.
Scenarios
Lightweight Personal Blog Site
For beginners, students, and content creation novices, a lightweight personal blog site is an ideal choice. This solution uses static site generators like Next.js or Hexo, with no need for a database or complex backend. Simply manage Markdown files to publish content, offering extremely low setup and maintenance thresholds. It's super suitable for recording growth, life, study notes, and other scenarios.
Feature-Rich Blog/Content Site
For senior personal users or small teams with higher content management requirements, a feature-rich blog/content site is more suitable. This solution combines a headless CMS (such as Contentful) with a static site generator (such as Astro), supporting complex functions like multi-author collaboration, content classification, tags, rich media display, and multilingual capabilities. It enables long-term operation, diverse content formats, and flexible scalability, making it ideal for knowledge-based websites or blog projects requiring team collaboration.
Scenario Example: Lightweight Personal Blog Site
If your needs belong to a lightweight personal blog scenario, see the steps below to quickly build your own blog website.
First, check the preview image of the template demo page (as shown in the figure above). You can see this template includes webpages such as Home, Projects, Posts, and About. After downloading the template, change the default content to your personal content. At this point, you need to configure the ts files for different pages in the configuration file directory src/config (as shown in the figure below).
After the configuration is complete, next needed is to manage the blog article content. You can directly add or remove or modify Markdown files under the directory src/posts (as shown in the figure below), by editing md files to update the blog article content.
After performing add, delete, modify, or check operations on the md file list, execute the following commands to parse the md files, convert their content to configuration files, and generate them into the src/config/posts.ts file.
npm run generate-posts
After modifying the content, execute npm run dev to preview locally.
3. Deploy to EdgeOne Pages
First, commit the project to the GitHub repository:
gitadd.
git commit -m "Initial commit"
git push origin main
After submission, enter the Console, select the submitted project, and click "start deployment" to begin the deployment.
After successful deployment, you will get an Access Address. Click the Access Address to enter the deployed blog webpage.
Scenario Example: Feature-Rich Blog/Content Site
If your needs belong to a feature-rich blog or content website scenario, see the following steps to build a blog website based on a headless CMS + static site generator mode.
1. Configure Contentful
First, Contentful requires you to sign up and create a Content Space. After registration is completed, you need to understand the core concept of Contentful, including:
Space: The basic unit of content management, containing all content, media files, and settings.
Content Type: Defines the structure and fields of content, such as blog article, author, category.
Entry: A content-based instance created from a content type.
Asset: Media files, such as images, videos, documents.
Environment: version management of content, such as development, test, and production environment
For the specific model configuration process in the management interface, see document guide to operate by yourself. However, there is also a more convenient way, which is to generate the content model via direct import of JSON data, with no need to create manually.
First, global installation of the Contentful CLI tool is required to use import JSON data for generating content configuration. Please execute the following commands in the terminal:
Download the configuration, then execute the Contentful login operation:
contentful login
After execution, the system will prompt whether to log in via the browser. Select yes. The browser will pop up an authentication window. After granting permission, the token for login will be displayed.
Copy the token to the command line to complete login, as shown below:
After logging in, execute the command to import the JSON configuration locally:
contentful space import --content-file [/your_path/contentful-blog-model.json]
After the import is complete, return to the Contentful management interface and confirm the JSON data content has been synchronized to the space. At this point, our content interface should look like the following:
Next, create a Contentful Delivery API token. Click the Settings icon in the upper-right corner of Contentful, then click API Keys. If there is no Content Delivery API - access token, create one; if it already exists, copy directly. As shown below:
We need to save the following 3 values:
CONTENTFUL_SPACE_ID=${your space id}
CONTENTFUL_DELIVERY_TOKEN=${Contentful delivery api token}
CONTENTFUL_PREVIEW_TOKEN=${Contentful preview api token}
The src/utils/contentful.ts file reads the 3 configured Contentful environment variables, pulls data via the Contentful SDK, and renders the webpage. For local testing, you can manually set the values of these 3 variables, then start the local preview.
The main frontend architecture of the project is as follows:
src/pages/
├── [...index].astro # homepage - show article list
├── [...posts_slug].astro # article details - show single article
├── [...tags].astro # tag page - show tag list
└── [lang]/ # multilingual route
The frontend page structure corresponds to the earlier imported JSON data structure. If only used to test the process, no need for additional modifications, just keep the original code files. If needed, modify the frontend code or adjust the JSON data structure to develop a custom page layout that meets the requirement.
3. Deploy to EdgeOne Pages
First, commit the project to the GitHub repository:
gitadd.
git commit -m "Initial commit"
git push origin main
After submission, enter the Console, select the submitted project, as shown in the figure:
Here, we need to input 2 global variable values, which configure the data pull from Contentful. After configuration is complete, click "start deployment" to perform the deployment.
After successful deployment, you will get an Access Address, as shown in the schematic diagram:
Click the Access Address in the figure to enter the deployed blog webpage.
