This post is going to be simple and straight to the point. I must also warn that
it is technical. If you follow the instructions, the steps are detailed enough
to allow anyone who’s familiar with
nodejs to follow it.
- Install NodeJS and Yarn/NPM
- Docusaurus: Create a new folder
cdto the folder and run
- Some files will be generated
- Run the local webserver via
The webpage will open on your browser. It’s now time to customize your blog and move your blog posts from medium to your blog.
website/static/and copy and paste the code below in it and restart your webserver via
Notice that the webpage opens up with the default blog posts
Congratulations on completing the hard part. You only need to do the above once.
Moving a medium post to your static blog
Install the chrome extension Convert Medium Posts to Markdown
Create a new file markdown (.md) in
website/blogdirectory. The filename must be in the format
YY-MM-DD-my-post-title.md. The date part is important. Th title does not matter. The date should ideally be the date you published your medium post.
Copy and paste the following on top of the file:
title: We failed at starting a Business and it was depressing
author: Uchi Uchibeke
The title should be the title of your medium post
- Next, using chrome, open the medium post you want to move over. Make sure to scroll to the bottom to ensure all images are loaded.
- Once the medium post is open, click on the Convert To Markdown chrome extension icon. A popup will open containing your medium post in markdown format.
- Copy the markdown text from the popup
- Go back to the
YY-MM-DD-my-post-title.mdfile and paste the text.
- Delete the first line (post title)of the posted content
- Delete all the lines at the bottom after the end of your post
- Save file and restart server
- That’s it. You’re done.
- Maybe delete the default files that came with the template
- To add more medium posts, do the same things you’ve done starting at the beginning of this section
Static HTML generation and deployment
npm run buildto create an optimized version of your blog posts
- Move the contents of
blogdirectory on your website.
- Push to your web host like you would normally do
YourWebsite.com/blogwill take you to all the medium posts you added
For next time, I will be writing about customizing your blog, changing the footer, header and icons and, adding meta tags and other SEO stuff.
One more thing: Notice that
YourWebsite.com/blog shows the full post. We
probably want to show a truncated summary. To do that:
- In the
<!--truncate-->on the line you want the post to be truncated on
Please, leave your questions below until next time.