This document describes how to quickly build a personal blog site, including choosing an appropriate blog framework, deployment plan, and detailed directions. You will learn the complete process of setting up a personal blog and quickly own 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 post-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 to configure a complex environment, 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 customizing content structure and UI styles.
Easy-to-maintain: Content and frontend separation with support for 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 (such as Next.js, 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 suitable 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 enables long-term operation, diverse content formats, and flexible scalability, making it ideal for knowledge-based websites or blog projects requiring team collaboration.
Example Scenario: 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, view 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, set 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), by editing md files to update blog article content.
After adding, deleting, modifying, or checking the md file list, execute the following commands to parse the md files, convert their content to a configuration file, and generate it to src/config/posts.ts.
npm run generate-posts
After the content is modified, 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 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.
Example Scenario: 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
Start by signing up on the Contentful platform and create a Content Space. After registration is completed, you need to understand the core concepts 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 specific content instance created based on a content type.
Asset: Media files such as images, videos, and documents.
Environment: Version management of content, such as development, test, and production environment.
For the specific model configuration process in the management interface, see the guideline 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 installing the Contentful CLI tool globally to use JSON data import for content configuration. In the terminal, execute the following commands:
After downloading the configuration, execute the Contentful login operation:
contentful login
After execution, the system will prompt whether to log in via browser. Select yes. The browser will pop up a login authentication window. After granting permission, it will display the token for login use.
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 look like the following:
Next, create a Contentful Delivery API token. In the top-right corner of Contentful, click the Settings icon, 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 values of these 3 variables manually, then start up the local preview.
The main frontend architecture 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 previously imported JSON data structure. If it is only used to test the process, no additional modifications are needed, just keep the original code file. If needed, you can modify the frontend code or adjust the JSON data structure to develop a page 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 enter 2 global variable values to configure retrieving data from Contentful. After configuration is complete, click "start deployment" to begin 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.
