To make the homepage a little more interesting to look out, I thought' I'd have a look into bootstrap as a framework. The plan is to do more with it over time, but for now using it like this is a placeholder/reminder.
To get the latest version, just Download Bootstrap.
Also, quick shout out for vim settings for indenting (I never remember them): Tab key == 4 spaces and auto-indent after curly braces in Vim
Shell commands used
# Edit .vimrc, for indentation: https://stackoverflow.com/questions/234564/tab-key-4-spaces-and-auto-indent-after-curly-braces-in-vim vi ~/.vimrc #Install the unzip command sudo apt-get install unzip # Create a backup location and backup existing index page mkdir -p backup/homepage cp /var/www/html/index.html backup/homepage/. # Get the latest code and extract the archive (note: file name will change over tiem) cd /var/www/ wget https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta.3/bootstrap-4.0.0-beta.3-dist.zip unzip bootstrap-4.0.0-beta.3-dist.zip rm bootstrap-4.0.0-beta.3-dist.zip #Edit the index.html file using the template in the getting started documentation: http://getbootstrap.com/docs/4.0/getting-started/introduction/ vi index.html
My homepage using the basic template
- index.html
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <title>Roman-Halliday.com</title> </head> <body> <div class="container-fluid"> <h1>Personal Homepage</h1> <p>More stuff: <ul> <li><a href="http://datablog.roman-halliday.com">datablog.roman-halliday.com</a></li> <li><a href="http://wiki.roman-halliday.com">wiki.roman-halliday.com</a></li> <li><a href="http://romanian.roman-halliday.com">romanian.roman-halliday.com</a></li> </ul> </p> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script> </body> </html>