Static Pages

A static website is a type of website that is delivered to the user exactly as it is stored, with no server-side processing or dynamic content generation. Static websites are typically built with HTML, CSS, and JavaScript, and they are suitable for smaller sites that do not require frequent updates or user interaction. Our website and Landing Page are built this way and are also hosted in a Codesphere Workspace.

There are several ways of hosting a static website, and several different frameworks depending upon the language you use like Flask, Django, Node jS, Express JS, Ruby on Rails, etc. Here you can find how to host a static website with Flask, Express js, and Vue. 

Using Python Flask

There is a specific code structure that is followed in Flask. So make a folder named templates and add all your HTML files to it. 

Now, create another folder named static and add all the CSS, images, and Javascript files to it. 

If you have images make sure to write the link to the images in your files in this format: 

src="{{ url_for('static', filename='images/xyz') }}"

Replace ‘xyz’ with the name of your image

Since flask is not included in Python by default you need to make another file named Pipfile. You can write the dependencies you want in this file.

In the simplest form they look like this:

Flask = “==2.3.2”
Flask-Cors = ”==4.0.0”
Flask-RESTful = “==0.3.10

Now make a run.py file, it is the control file that will define the paths of different pages. Here is what it should look like:

from flask import Flask, render_template
app = Flask("Happy Travel", template_folder="templates",
            static_folder="static")

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/index')
def index():
    return render_template('index.html')

@app.route('/contact')
def contact():
    return render_template('contact.html')

@app.route('/gallery')
def gallery():
    return render_template('gallery.html')

@app.route('/blog')
def blog():
    return render_template('blog.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port='3000', debug=False)

Make sure to set the port to 3000.

Now you can go and add these commands to your CI pipeline.

In the prepare stage write:

pipenv sync

In the run stage write:

pipenv run python run.py

Your website should be ready to be used now.

Using Express js 

In Express js a file structure is followed as well. Make a folder named public and move all your html, css, and image files there. Now make an index.js file and specify the static folder name. To run it on codesphere, set the port to 3000. Here is a code snippet

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Now you can go and create a file named ci.yml and add these commands to it.

prepare:
  steps:
    - name: Install Dependencies
      command: npm install
test:
  steps: []
run:
  steps:
    - name: Start Dev Server
      command: npm start

Using Vue

To host a static website using Vue js, ensure you have Node.js installed on your system. Next, you can create a new Vue.js project using Vue CLI (Command Line Interface). If you do not have Vue CLI installed yet, you can do that by running the following command:

npm install -g @vue/cli

Then, create a Vue project:

vue create my-project

Replace my-project with the name you want to give to your project.

Now inside your Vue project go to src/router/index.js and add your routes to the routes object like this:

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

The next step is to go to the views inside src and add the HomeView and AboutView. This will be the HTML code inside the template tag. Here is what it would look like:

<template>
  <div>
    <h1>Welcome to the Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

Once you add the views, add the CSS. For CSS edit the style tag in src/App.vue. Here is a code snippet.

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style>
[CSS_GOES_HERE]
</style>

Now create a ci.yml file and add the build and run steps.

prepare:
  steps:
  - name: "Install dependencies"
    command: "yarn install"
  - name: "Build"
    command: "yarn build"

test:
  # Put your commands here.
  steps: []

run:
  steps:
  - name: "Run"
    command: "yarn preview --host --port 3000"

And now your application is ready to use.