website:bootstrap [wiki.roman-halliday.com]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
To make the homepage a little more interesting to look out, I thought' I'd have a look into [[http://getbootstrap.com|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 [[http://getbootstrap.com/docs/4.0/getting-started/download/|Download Bootstrap]].

Also, quick shout out for vim settings for indenting (I never remember them): [[https://stackoverflow.com/questions/234564/tab-key-4-spaces-and-auto-indent-after-curly-braces-in-vim|Tab key == 4 spaces and auto-indent after curly braces in Vim]]

====== Shell commands used ======
<code sh>
# 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
</code>
====== My homepage using the basic template ======
<file html 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>

</file>