Personal web page setup

Because this directory and all the files inside are written each time you commit, you do not want this directory under version control. In this example, we're telling Jekyll the name of our site and what version of Markdown we'd like to use:. At this point, I'm hopeful that you've got the hang of creating files and directories using the GitHub web interface, so I'm going stop using screenshots to illustrate those actions.

Remember, you can make directories while making new files. See the main. Now we won't have to repeat that markup on every single page we create, making maintenance of our site much easier. So let's move those elements from index. They're what Jekyll calls liquid tags, and these are used to inject content into the final web page.

More on this in a bit. Replace the entire contents of that file with this:. Notice the plain text at the top of the file. Jekyll calls this the Front-matter. Any file on your site that contains this will be processed by Jekyll.

A Jekyll-based blog uses the same conventions that we've familiarized ourselves with in the previous steps, but takes things further by adding a few more for us to follow. Jekyll is very flexible allowing you to extend your site as you wish, but in this guide we're only going to cover the basics: creating a post, making a page to list our posts, creating a custom permalink for posts, and creating an RSS feed for the blog.

We'll want to create a new layout for our blog posts called post. Create a file named post. Notice the post layout uses the default layout as it's base, and adds a couple new liquid tags to print the title of the post and date:.

Inside that folder will be our first post. Jekyll is very strict with how these files are named, so pay attention. This file name gets translated into the permalink for the blog post. So in this example, we'll create a file named hank-quinlan-site-launched. Finally got around to putting this old website together. It actually is a lot easier than I thought it was going to be.

Note the file extension. Like Wikitext, Markdown is a markup language with a syntax closer to plain text. The idea of Markdown is to get out of the author's way so they can write their HTML content quickly, making Markdown very suitable as a blog authoring syntax.

Important Note: Plugins work directly with the guts of your WordPress installation. I recommend looking up plugins at the WordPress Plugin Directory before installing them. If a plugin has a low star rating, it might be broken — or even worse, it could have security vulnerabilities that can open up your blog to attacks.

Be careful out there, trooper. I recommend you use them as well. These plugins are just the tip of the iceberg. There are already a few widgets displaying on your site by default, like Category, Recent Posts, and Meta though some themes might not display them everywhere. Builder themes typically include these types of things in their builder tools.

Widgets are automatically saved when you drag them in or out of a box. This keeps things from getting redundant. Since this is a personal site , there are some specific widgets you might want to show:. You should now have a fully functional website! The purpose of this tutorial was to get you from zero to having a working website as easily as possible. Oh, and of course, millions upon millions of other sites are trying to do the same thing.

Now, Google will index your site automatically — often in just a couple of days. Clearly, the main thing you want to be associated with is your name. Often first. Most of my work today is done at College Info Geek — a site I created in in order to share my experiments in becoming a more effective student.

Google picks up on those terms and feeds them into its algorithm. What about your location? To put it simply, your site will rank more highly when it has:. The more competitive a search term is, the more authoritative links your site will need to rank for it. This includes:. If you want to go further, consider writing guest articles for sites in your industry or for your school newspaper. Links from those sites can help, especially if your name has a lot of competition like mine does!

Lastly, I do want to mention that Google puts a high priority on mobile-friendliness. For a deep dive into getting your site to rank in Google, check out our detailed guide to personal SEO. I started building websites when I was At first, I was just using the super-old school Geocities site building tool to drag and drop elements. Luckily, the web has come really far in recent years.

With content management systems like WordPress, anyone can make a beautiful website as you just did without knowing any code whatsoever. Still, clicking around WordPress can only get you so far. With that in mind, here are some resources you can use to kickstart your web development education. In fact, many universities offer their students free subscriptions to this site.

Another great video-based learning library is Treehouse. I actually prefer Treehouse over Lynda, as they include code challenges and quizzes with their video-based projects. In fact, I learned to build an iPhone app in just two days by using Treehouse. Of course, another great way to learn web development is to simply look at code. You can also use the Web Developer extension to dig in even deeper.

These resources will get you started, but know that there are lots of other great ones out there. One of the best ways to learn is simply talking to other developers! Here are some of my favorite WordPress-related blogs, which I read regularly to learn how to make my sites awesome:. And to get you started, one thing you may want to do is enable Google Analytics to track visitor statistics thanks to Shep McAllister for reminding me to add this.

You might not feel the weight of that word, especially if you just browsed through this article first before getting started. Hopefully, you now have a completely functional website and a budding knowledge and interest in web development. Remember, if you need any help, you can contact me. Did you find this tutorial useful? Want to give back a little? It only takes a second to share this post on Facebook or Twitter, and it helps other students find College Info Geek. Or, you can use the image to the right for sharing on Pinterest!

If you want to get updates when I release more great content like this in the future, be sure to sign up for my email newsletter below! By default, the site will have a URL starting with sites.

To get started, go to sites. To start off, you can pick from a couple of templates like sports team, classroom site, wedding, etc. Give your site a name and then customize the end of the URL if you like. You can change it to something else, but it has to be unique amongst all the Google Sites created in the world. If you chose a blank template, you can select a theme also. The important section is at the top where you can edit the current page, create a new page and adjust the settings for the page and the site.

The first thing I would suggest doing is to click on the gear icon and then click on the Manage site link at the bottom. Here you can configure a bunch of options like the site name, site description, the landing page, etc. You can also setup a site notice, which will pop up a message for all visitors of the website.

At the bottom, there is an option to make the site responsive by adjusting it for mobile phones. The last section lets you add a header image and change the font, color and size for the text in various sections of the site like content area, sidebar, navigation, etc.

To do that, go back to your homepage and then click on the gear icon again. This time click on Edit site layout. By default, Header and Sidebar are selected and enabled. Once you have added the index. Important: When setting permissions always make sure that you do not have the write bit set in any of the last 6 positions show by 'ls' as that will mean that other people on the system could potentially write changes to those files or directories.

Skip to main content.