This 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 rely on self-built servers, virtual hosts, or traditional CMS (such as WordPress), requiring users to manually perform environment deployment, database configuration, and security maintenance, with a relatively high operational threshold and significant subsequent maintenance costs. EdgeOne, based on edge computing and static site technology combined with Pages blog Template, delivers 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 for complex environment configuration, just a few minutes to go live.
High performance and security: Based on edge node distribution, access speed is fast with strong anti-attack capability.
Flexible customization: Supports customizable content structure and UI styles.
Easy-to-maintain: Content and frontend separation with support for visual 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, making setup and maintenance super easy. It's perfect for recording growth, life, and study notes.
Feature-Rich Blog/Content Site
For senior personal users or small teams with higher content management needs, a feature-rich blog/content site is more suitable. This solution combines a headless CMS (such as Contentful) with a static site generator (like Astro), supporting complex functions like multi-author collaboration, content classification, tags, rich media display, and multilingual capabilities. It makes long-term operation easy, offers diverse content formats, and provides 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 following steps 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 Home, Projects, Posts, About and other pages. After downloading the template, change the default content to your personal content. At this point, 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 to manage blog article content. You can directly add or remove or modify Markdown files under the directory src/posts (as shown in the figure below), and update blog article content by editing md files.
After adding, deleting, modifying, or checking 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
Commit the project to the GitHub repository first:
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 the headless CMS + static site generator mode.
1. Configuring 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 for content, such as development, test, production environment.
For specific model configuration in the management interface, see document to operate by yourself. However, there is also a more convenient way via direct import of JSON data to generate the content model, no need to create manually.
First, start by using JSON data import to generate Contentful content configuration. Global installation of the Contentful CLI tool is required. Please execute the following commands in the terminal:
After downloading the configuration, 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 a login authentication window. After granting permission, the token for login will be displayed.
Copy the token to the command line, then click OK to complete the log-in. 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 appear as shown below:
Next, create a Contentful Delivery API token. Click the Settings icon in the top-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 set the variable values manually, then start up the local preview.
The main frontend structure 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 JSON data structure imported earlier. If it's only used to test the process, no need for additional modifications—keep the original code files. If custom page layout is needed, you can modify the frontend code or adjust the JSON data structure to develop a page that meets the requirements.
3. Deploy to EdgeOne Pages
Commit the project to the GitHub repository first:
gitadd.
git commit -m "Initial commit"
git push origin main
After submission, enter the Console and select the submitted project, as shown in the figure:
Here, we need to enter 2 global variable values, which configure the retrieval of data from Contentful. After configuration is complete, click "start deployment" to begin 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.
