This blog was created using Hexo, a fast and simple static site generator, and enhanced with the Butterfly theme. Here’s a step-by-step tutorial on how this site is built:

Chapter 1: Building a Hexo Blog Site

This chapter covers the process of setting up a blog using Hexo and the Butterfly theme.

1. Set up the environment

First, ensure you have Node.js installed on your system. Then, install Hexo globally via npm:

1
npm install -g hexo-cli

2. Create a new Hexo project

Create a new directory for your blog and initialize a Hexo project:

1
2
3
hexo init my-blog
cd my-blog
npm install

3. Configure your site

Edit the _config.yml file in the root directory to customize your site settings, such as title, author, and URL.

4. Install the Butterfly theme

Install the Butterfly theme and its dependencies:

1
2
npm install hexo-theme-butterfly
npm install hexo-renderer-pug hexo-renderer-stylus

Then, modify your _config.yml file to use the Butterfly theme:

1
theme: butterfly

5. Create content

Create new blog posts using the Hexo command:

1
hexo new "How this blog site is built"

Edit the generated Markdown file in the source/_posts directory to add your content.

6. Generate and preview your site

Generate your static files and start a local server to preview your site:

1
2
hexo generate
hexo server

Visit http://localhost:4000 in your browser to see your site.

That’s it! You now have a fully functional blog site built with Hexo and the Butterfly theme. Customize it further by exploring Hexo’s plugins and the Butterfly theme’s configuration options to make it truly your own.

Chapter 2: Adding Comments to Your Blog

This chapter covers the process of adding comments to your blog using Waline.

Waline is a simple, safe, and free comment system. Here’s how to add it to your blog:

1. Set up Waline Server

First, you need to set up a Waline server. You can deploy it on platforms like Vercel, Heroku, or your own server. Follow the official Waline documentation for detailed instructions.

2. Install Waline in your project

If you’re using npm, install Waline in your project:

1
npm install @waline/client

3. Using Waline in the theme

In the _config.butterfly.yml file, add the following code to the comments section:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
comments:
# Up to two comments system, the first will be shown as default
# Leave it empty if you don't need comments
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
# Format of two comments system : Disqus,Waline
use: waline
# Display the comment name next to the button
text: true
# Lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: false
# Display comment count in post's top_img
count: false
# Display comment count in Home Page
card_post_count: false

4. Configure Waline settings

In your theme’s configuration file (e.g., _config.butterfly.yml for the Butterfly theme), add Waline settings:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
waline:
    serverURL: https://your-walines-server.vercel.app # Replace with your Waline server URL
    placeholder: Please leave your footprints
    avatar: mm
    meta: ['nick', 'mail',]
    pageSize: 5
    lang: en
    visitor: false
    highlight: true
    avatarCDN: 
    avatarForce: false
    requiredFields: []
    uploadImage: false
    recordIP: false
    enableQQ: false

That’s it! You should now have Waline comments working on your blog. Remember to adjust the serverURL and other options to match your specific setup.

This tutorial will guide you through the process of deploying your website on Vercel and connecting it to the custom domain www.mol-science.com.

Chapter 3: Deploying Your Website on Vercel with a Custom Domain

This chapter covers the process of deploying your website on Vercel and connecting it to the custom domain www.mol-science.com.

1. Prepare Your Project

Ensure your project is ready for deployment:

  1. Your project should be in a Git repository (GitHub, GitLab, or Bitbucket).
  2. Make sure you have a package.json file with a build script defined.

2. Sign Up for Vercel

If you haven’t already, sign up for a Vercel account at https://vercel.com.

3. Connect Your Repository

  1. From the Vercel dashboard, click “Import Project”.
  2. Choose “From Git Repository” and select your Git provider.
  3. Authorize Vercel to access your repositories.
  4. Select the repository containing your website.

4. Configure Your Project

  1. Vercel will automatically detect your project settings.
  2. Verify the “Framework Preset” is correct (e.g., Next.js, Hexo, etc.).
  3. Adjust the “Build and Output Settings” if necessary.
  4. Click “Deploy” to start the deployment process.

5. Set Up Your Custom Domain

  1. Once deployed, go to your project settings in the Vercel dashboard.
  2. Navigate to the “Domains” section.
  3. Click “Add Domain” and enter “www.mol-science.com“.
  4. Vercel will provide you with DNS records to add to your domain registrar.

6. Configure Your Domain Registrar

  1. Log in to your domain registrar (where you purchased mol-science.com).
  2. Find the DNS management section.
  3. Add the DNS records provided by Vercel. Typically, this includes:
    • An A record pointing to Vercel’s IP
    • A CNAME record for the “www” subdomain

For example:

1
2
A     @     76.76.21.21
CNAME www   cname.vercel-dns.com

7. Wait for DNS Propagation

DNS changes can take up to 48 hours to propagate, but often complete within a few hours.

8. SSL Certificate

Vercel automatically provisions an SSL certificate for your custom domain. Once the DNS propagation is complete, your site will be accessible via HTTPS.

9. Verify Deployment

  1. Visit https://www.mol-science.com in your browser.
  2. Ensure your website loads correctly and the SSL certificate is valid.

10. Set Up Automatic Deployments

Vercel automatically deploys your site when you push changes to your repository. To customize this:

  1. Go to your project settings in Vercel.
  2. Navigate to the “Git” section.
  3. Configure your preferred branches for Production, Preview, and Development environments.

Congratulations! Your website is now deployed on Vercel and accessible at www.mol-science.com. Any changes pushed to your repository will trigger automatic redeployments, keeping your site up-to-date.