Create your own academic web page

Lately, my supervisor asks me to set up an academic web page, which is an inevitable thing anyone should do in their academic career, especially in Computer Science. With a little help from friends, I eventually figure out a general way to make one. 

PREPARATION

Basically, all the thing you need to prepare is:

  • Create an account to access to School’s server. In my case, NUS’s server is Sunfire.
  • Knowledge in web programming. Believe me, I have never set up a single website before. You have 2 options: coding from scratch, or buying a template and modify the text as you want(“a very worthwhile investment” according to my Prof).
  • Download this file. It is a very handy instruction of how to interact with a UNIX server, as well as how to set up a basic HTML page.

HOW IT WORKS

First, you design your own website on your own computer. When you have satisfies with your work, you can upload it on school’s server. By this way, if you moved to other schools in the future, the only thing that matters is your original file, which can then be easily uploaded to the new server once again.

Make a web page

A simple one: open your editor (Notepad for instance) and type following lines:

<html>
    <head>
        <title> This is my webpage </title>
    <body>
        Hello World!
    </body>
</html>

Save the file name as “index.html”. Now open the file with your Browser (Chrome). See the result. This is how your web page would look like.

A more beautiful one: as I understood, a more professional web page consists of 2 main components: a HTML file and CSS files. Imagine CSS files as any types of furniture you can have in the house, and HTML file would organise them in a proper way to make your house the coolest in town. So if you want to create a new tab, you can call an instance which already defined in CSS file, and type its name in the HTML file.

You can forget everything I have said because the best way to learn is playing around a well-designed template. Open the HTML file, modify this and that, and save the file to see what change, then you can learn how it works in about an hour. One thing to note is that other files such as images are usually stored in separate folders, which could give you a hint to Ctrl+F (search) how to interact with them.

You can find my template here.

File transfer to server

Next, you gather all your files and store them in a folder named “public_html”. Use option File Transfer to transfer that folder to the root directory. Type following commands so that people from the Internet can access to your web page:

cd ~
chmod 711 ./
chmod 711 ./public_html
chmod 744 ./public_html/index.html

Now open your server and type in the address of your page <school’s addresss> <your account>. Mine is http://www.comp.nus.edu.sg/~hxvinh/.

Next time you update, remember to type the above lines again to make sure you grant access to your page. It took me approximately 3 days for Google to index my page automatically so that everyone around the word can find the page by typing in your name.

Check my web page here 😀

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s