Static website:

    Start your front-end website

    Introduction

    This guide is going to help you start developing your static websites at SourceLair and make the most out of SourceLair's capabilities.

    This guide assumes that you already have

    Public URL

    HTML projects at SourceLair are equipped with a dedicated development server, which is publicly accessible using its Public URL. You can use it to develop and test your website or showcase your work to other people.

    Setup

    By default your development server looks for an HTML file called index.html in your project's root folder (mnt/project/) and displays that as the homepage of your website. In case you have placed your index.html to any other folder than root, you need to click on the gear next to your project's name and change its "HTML root" accordingly. Otherwise Public URL will display the content of your project's root folder.

    Project settings - root

    How to use

    There are 2 ways to access the Public URL of your project:

    • Click on the eye icon at the left sidebar of the IDE
    • Open Command Palette (Ctrl/Cmd + Shift + P) and write in free text "public url" and press "Enter"

    Installing dependencies

    Bower is pre-installed to your micro-server and so you can use its commands from your fully featured terminal.

    Bower is a package manager for client side technologies. It can be used to search, install, uninstall web assets like JavaScript, HTML, and CSS. You can read more here.

    Develop using Browsersync

    Browsersync is a fantastic open-source tool that allows real-time updating of a browser window, when a file (e.g. HTML, CSS, JavaScript) gets updated, without requiring any action from the developer.

    Requirements

    Browsersync is integrated with your HTML project type thus the only requirement for coding without refreshing your browser to see any update, is to have a </body> tag in your html files.

    Features

    Auto-reload: Develop your website without having to refresh the tab of your application every time you update your code, even if you are using separate screens to develop and view your website.

    CSS-injection: If you edit a CSS file of your web page, Browsersync will automatically inject just that file to your page, as you save it, without reloading the whole browser window.

    Actually, it's much more than this, read more about Browsersync at our blogpost.

    Tips to code faster

    SourceLair provides you with some great features in order to help you develop faster your website being focused on the creative part of programming.

    Auto-format

    When you write your HTML and CSS files, SourceLair's editor automatically place your cursor at the correct indentation level so that you don't have to worry about it. Although, when you break down your format you can select the number of lines you want to "auto-format" and press Shift + Tab.

    Emmet.io

    Emmet.io is a plugin which greatly improves HTML & CSS workflow with its awesome abbreviations and shortcuts. It works out of the box in your editor in SourceLair and we highly suggest you to try it out.

    Some useful abbreviations and shortcuts:

    • Ctrl/Cmd + D: Selects the whole text/code between two HTML tags.
    • type ! and then press tab: Creates the initial code of an HTML file
    • type a and then press tab: Creates the a HTML tag with its href attribute

    Quickopen

    Quickopen is a fast and time saving way to navigate through your filesystem in order to find and open any file you want using your keyboard.

    There are 2 ways to open the Quickopen prompt:

    • using its shortcut Ctrl/Cmd + Shift + O
    • finding Quickopen: Open a file command from Command Palette (Ctrl/Cmd + Shift + P)

    Command Palette

    Command Palette is a free text search tool which helps you use most of SourceLair's features really fast. You can open it by pressing Ctrl/Cmd + Shift + P.

    Deployment

    There are many ways to deploy your static website, choose the one that fits your needs:

    Previous step
    Step of
    Next step