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?
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.
-
Open a browser and sign in your github account.
-
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/) -
Download my repo and open the file
index.html
.
Modify theindex.html
by uncommenting one of the 3 methods. -
..
-
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 Actions → Embed item
→ Copy & paste the given html code intoindex.html
file to replace codes in Method 3.
-
-
Upload your
index.html
(the file name cannot be changed.) onto your github repo. -
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 messageYour 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/) -
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.
- 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.
https://gitbook.tw/chapters/github/using-github-pages.html (Chinese)