Skip to content

GitHub Pages blog setup

Setting up a blog using GitHub Pages involves creating a specific repository on GitHub and configuring a Static Site Generator (SSG), such as Hexo, to build and deploy your content^[600-developer-blog-hexo-blog-create-blog-hexo.md]. This method allows users to host a blog for free at a github.io domain^[600-developer-blog-hexo-blog-create-blog-hexo.md].

GitHub Repository Creation

The first step is to create a new repository on GitHub. To host a User Page or Organization Page, the repository must be named specifically in the format <username>.github.io^[600-developer-blog-hexo-blog-create-blog-hexo.md]. Once created and configured, the blog will be accessible at the URL https://<username>.github.io/^[600-developer-blog-hexo-blog-create-blog-hexo.md].

Static Site Generator (Hexo)

While static HTML can be used, developers often use a framework like Hexo to manage posts and themes^[600-developer-blog-hexo-blog-create-blog-hexo.md]. The general workflow for setting up Hexo involves:

  1. Initialization: Creating a directory and initializing the site using npm install -g hexo followed by hexo init^[600-developer-blog-hexo-blog-create-blog-hexo.md].
  2. Dependencies: Installing necessary node modules with npm install^[600-developer-blog-hexo-blog-create-blog-hexo.md].
  3. Local Testing: Generating files with hexo generate and starting a local server with hexo server to preview the site^[600-developer-blog-hexo-blog-create-blog-hexo.md].

Project Structure

A standard Hexo project contains specific directories that define the blog's appearance and content^[600-developer-blog-hexo-blog-create-blog-hexo.md]:

  • _config.yml: The main configuration file for the site.
  • source/_posts/: The directory where Markdown articles (posts) are stored.
  • themes/: The directory containing website themes, each with its own _config.yml for theme-specific settings^[600-developer-blog-hexo-blog-create-blog-hexo.md].
  • public/: The directory where the generated static files are output^[600-developer-blog-hexo-blog-create-blog-hexo.md].

Deployment Configuration

To automate the deployment process to GitHub Pages, the _config.yml file must be updated with the deployment target repository URL^[600-developer-blog-hexo-blog-create-blog-hexo.md].

  1. Install Deployer: The hexo-deployer-git package is required to push the generated static files to the GitHub repository^[600-developer-blog-hexo-blog-create-blog-hexo.md].
  2. Deployment Commands: After generating the static site files with hexo generate, the hexo deploy command is used to push the content to the GitHub repository^[600-developer-blog-hexo-blog-create-blog-hexo.md].
  • [[Git]]
  • [[Static site generator]]
  • CI/CD

Sources

  • 600-developer-blog-hexo-blog-create-blog-hexo.md