Webpage html export optimized + vercel build blog tutorials


webpage html export is a plugin that can export notes to static blogs, but there are some bugs and deficiencies, so some modifications and fixes have been made.

webpage html export advantages:

  1. good compatibility with obsidian

  2. good for SEO optimization

The content of this update:

  1. fix some bugs
  2. style adjustment, fix browser compatibility
  3. add custom header code
  4. add comment function
  5. add code highlighting
  6. add creation time, number of comments, number of readers, QR code for mobile access to articles
  7. add scroll to the top
  8. add bottom copyright information
  9. add statistics code, you need to go to the Google statistics application.
  10. optimize the page display speed (priority display content and sidebar, full-text index back)
  11. increase the picture click to enlarge
  12. Increase the number of files displayed in the directory, etc.
  13. support File Color plug-in and bartender plug-in
  14. Discover more features on your own


The commenting system uses Waline, Waline is a commenting system with a back-end derived from valine. Support Markdown syntax, lightweight and easy to use, free deployment, a variety of deployment deployment methods and storage services support. Official address: https://waline.js.org


https://wxkj.asia/mynote/ (vercel deployment)

https://wilson.lovestoblog.com/demo/ob_demo/ (InfinityFree deployment)

Methods of operation

  1. Download the modified webpage-html-export.zip plugin and configure it in the plugin settings => Header Extension

Note: Waline Server URL is the server-side application address requested in step 2.

The name in the copyright information can be changed here:

All styles and code can be modified here (usually no modifications are needed unless you want to customize the style or functionality):

Once configured, you can export your notes to a local file.

  1. Comment server configuration, you can refer to Waline official document for back-end deployment, such as Vercel deployment or Deta deployment, Deta deployment is simpler.

  2. Vercel static file hosting, you can search online hosting methods, very simple, and usually a few steps to complete (register an account, link to GitHub and submit the document, deploy, and bind the domain name), according to the official prompts step-by-step operation.

  3. The root directory to create a new vercel.json can be some redirection and other operations.

  4. If you want to customize the 404 page, you can create a new 404.html in the root directory.

  5. Every time you submit a file to Github, it will automatically trigger the deployment of Vercel.

Incremental updates

If you update your notes later, you don’t need to upload all of them every time, otherwise it will waste resources if there are many files.

First of all, check Only export modified files in the plugin’s export option, and then just submit the exported files to Github.

If you have your own server and don’t want to use the default CDN, you can turn this on (in this case, it will export the dependent static resources to the local):

Why not use github.io for hosting

Because vercel has more features and is faster.


Because of the use of minisearch need to generate the full-text index file, due to the index file is large, the first time may consume traffic (after that it will be cached by the browser), but the network transmission usually compresses it to a few hundred kilobytes to transfer, and I have moved this load process to the last load, and will not block other page display, so there is no impact on the visual, but if your hosting platform has traffic limitations, it is recommended to host it via CDN (but note that the index file will change each time you export it and will need to be changed frequently).

If you don’t need to search you can remove the following option in Page Features so that the index file is not loaded

The End.


1 Like