GitHub – Create a Simple Website for your Side Project

github-logoIn this tutorial, you will see how to generate a website with your existing markdown documentation (like README.md …no need to rewrite everything).

Example

http://damienfremont.github.io/blog/

ScreenShot042

ScreenShot043.png

Steps

  1. Create or use existing project
  2. Activate GitHub pages
  3. Choose a theme
  4. Write documentation in markdown
  5. Edit remotely on GitHub

 


1. Create or use existing project

You need a project > use your existing side project reposity.

ScreenShot010.png

 


2. Activate GitHub pages

You just need to follow GitHub documentation: activate GitHub pages in repo’s settings > choose a theme.

https://pages.github.com/

ScreenShot012.png

ScreenShot003ScreenShot004

ScreenShot036

ScreenShot009.png

 


3. Choose a theme

Your project site is not very prety > use Theme chooser in your repo’s settings > choose one > test it.

ScreenShot007.png

ScreenShot037.png

ScreenShot038.png

ScreenShot039.png

ScreenShot036.png

ScreenShot040.png

 


4. Write documentation in markdown

Your website pages layout start with README.md > after that it’s up to your links in the markdown files.

https://guides.github.com/features/mastering-markdown/

  • create README.md main page
  • create subpages
  • add link to theses subpages in README.md

You can test it locally or onsite (GitHub). Depends of your goal (stable update lifecycle of your website with one-shot push,  or simpler with less tools but more chaotic).

 


5. Edit remotely on GitHub

The simplest way is to edit your files with GitHub website (no merge problem, no tools, builtin preview).

ScreenShot016.png

ScreenShot015.png

ScreenShot017.png

ScreenShot018.png

ScreenShot019.png

ScreenShot020.png

ScreenShot021.png

ScreenShot022

ScreenShot023

ScreenShot036

ScreenShot040

 


Source

https://github.com/DamienFremont/blog/tree/master/20170607-github-create-simple-website

References

https://guides.github.com/features/mastering-markdown/

https://pages.github.com/

https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/

https://help.github.com/articles/creating-a-github-pages-site-with-the-jekyll-theme-chooser/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s