Start your front-end website
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
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.
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.
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"
Bower is pre-installed to your micro-server and so you can use its commands from your fully featured terminal.
Develop using Browsersync
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.
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.
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 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
aHTML tag with its href attribute
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
Quickopen: Open a filecommand from Command Palette (Ctrl/Cmd + Shift + P)
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.
There are many ways to deploy your static website, choose the one that fits your needs:
- Deploy your website to GitHub Page (coming soon)
- Deploy your website with FTP