Skip to content

wkCircle/wkCircle.github.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 

Repository files navigation

Basic Tutorial- Build your own website by free Github Pages

You can build your own personal website by using GitHub pages. In the following, I provide 3 methods to build your own website. One of the simplest way is to put your already-on-hand Reseme or CV here and show it to the public.
This way, you don't need to learn HTML language since GitHub pages reruies index.html to be the home page. Our task now becomes: how to show your pdf within HTML to the public?

Let's Begin.

To show your home page to the public, please refer to the step 2.
There are three methods that you can embed pdf viewer into HTML. Overview of these three methods is given below.

  • Method1: pdf won't appear in index.html. Instead, it shows strings with link to the target pdf file (use pdf.js to open).
  • Method2: directly use pdf.js to view a pdf file.
  • Method3: directly use google pdf viewer to view a pdf file.

Tutorial Step by Step

  1. Open a browser and sign in your github account.

  2. Create a new repository <username>.github.io
    → Set this repo as private/public depending on whether you want to show your files in this repo to the public or not.
    → (README can be initialized or not, up to you.)
    E.g., my github ID is "wkCircle", so I should create a repo with name: "wkCircle.github.io"
    (Ofiicial Tutorial: https://help.github.com/articles/create-a-repo/)

  3. Download my repo and open the file index.html.
    Modify the index.html by uncommenting one of the 3 methods.

  4. ..

    • If you're using Method 1 or 2:
      Upload your pdf file onto your own repo, namely <usename>.github.io
      (Official tutorial: https://help.github.com/articles/adding-a-file-to-a-repository/)

    • If you're using Method 3:
      Upload your pdf file onto google drive. → Double click that file
      More Actions → Open in new window → More ActionsEmbed item
      Copy & paste the given html code into index.html file to replace codes in Method 3.

  5. Upload your index.html (the file name cannot be changed.) onto your github repo.

  6. Under your repository name, click Settings → Find the GitHub Pages section
    → Select master branch in the drop-down menu under the Source tab → click Save.
    Then you should see the message Your site is published at https://<username>.github.io/ under the same section.
    (Official Tutorial: https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/)

  7. Copy the web address in 5. and use incognito mode/window to test the availability of the web. Then you're done!
    E.g., my demo web site would be this.

Tips

  • Before uploading your index.html, you can firstly inspect its appearance on your local machine:
    just double click the file and your browser will show how it looks like.
  • Your pdf file and index.html should be placed at the same dir.

Reference

https://gitbook.tw/chapters/github/using-github-pages.html (Chinese)

About

A Demo that teaches you how to use the free GitHub pages to build your own personal HTML page:

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages