One place for hosting & domains

      How To Install Web Apps Using Cloudron on Ubuntu 18.04

      The author selected the Wikimedia Foundation to receive a donation as part of the Write for DOnations program.


      Cloudron is a platform that streamlines the installation and management of apps on your server, like WordPress, Rocket.Chat, Nextcloud, GitLab, OpenVPN, and more. A key benefit of using Cloudron is that it performs end-to-end deployment of apps. It automates tasks such as: provisioning databases, DNS setup, certificate management, centralized user management, and automatic backups.

      Apps on Cloudron also receive automatic updates. The Cloudron team tracks upstream app releases and publishes updates for apps. The user experience of installing and updating apps on your server is very similar to how apps are installed and updated on your smartphone: just click to install and start using them without system administration.

      In this tutorial, you’ll install Cloudron on your server then deploy a WordPress site, as an example, to experience how Cloudron performs complete deployment automation. Finally, to ready your Cloudron instance for production use, you will set up Cloudron to back up to DigitalOcean Spaces.


      To follow this tutorial, you’ll need:

      • A server running Ubuntu 18.04 with root access and a sudo, non-root account, you can set this up by following this initial server setup guide.

      • A domain name for app installation. If you use a domain like, Cloudron will install its dashboard at and the apps will be installed under subdomains that you specify, like,, and so on. It is safe to use a domain that is already in use as long as the my subdomain is available.

      • DNS API keys that Cloudron will use to perform DNS automation. Cloudron supports many DNS providers. If your DNS provider is not supported, you can use the wildcard or manual option. In this tutorial, we will use DigitalOcean DNS. You can generate a DigitalOcean DNS API key following How To Create a Personal Access Token.

      • A DigitalOcean Space with API keys (access and secret). To create a DigitalOcean Space and API keys, see How To Create a DigitalOcean Space and API Key.

      Step 1 — Installing Cloudron

      To begin, you’ll install Cloudron to your server using the official installation script. If you wish to skip this setup step, you can use the Cloudron 1-click image in the DigitalOcean Marketplace. Otherwise, for installing Cloudron manually, continue with this step.

      First, as your non-root user, download the setup script by running the following command:

      • wget

      Next, to make the setup script executable, run the following the command:

      • chmod +x ./cloudron-setup

      Finally, to install Cloudron, run the following command:

      • sudo ./cloudron-setup --provider digitalocean

      The setup will take around 10 minutes. Once setup is complete, the script will ask your permission to reboot the server, select Y to continue:


      ############################################## Cloudron Setup (latest) ############################################## Follow setup logs in a second terminal with: $ tail -f /var/log/cloudron-setup.log Join us at for any questions. => Installing software-properties-common => Ensure required apt sources => Updating apt and installing script dependencies => Checking version => Downloading version 3.5.0 ... => Installing base dependencies and downloading docker images (this takes some time) ... => Installing version 3.5.0 (this takes some time) ... => Waiting for cloudron to be ready (this takes some time) .... Visit https://<IP> and accept the self-signed certificate to finish setup. The server has to be rebooted to apply all the settings. Reboot now ? [Y/n] Y

      You’ve installed Cloudron on your server, now you can set up your domain and administrator account.

      Step 2 — Setting Up Cloudron

      In this step, you’ll configure Cloudron’s primary domain using the setup wizard and set up your Cloudron account for access. You’ll also provide Cloudron with your DigitalOcean API keys to secure your domain with Let’s Encrypt.

      Once the server has rebooted, navigate to https://your-server-ip in your browser and accept the self-signed certificate.

      In Chrome, you can accept the self-signed certificate by clicking on Advanced and then click Proceed to your-server-ip (unsafe). In Firefox, click on Advanced, then Add Exception, and finally Confirm Security Exception.

      Chrome - Accept Self signed Certificate

      At this point, the Cloudron setup wizard will appear. Provide a domain name and select where you host your domain. Although Cloudron supports many DNS providers, like Cloudflare, Gandi, and GoDaddy, in this tutorial, the examples will follow with the domain using DigitalOcean as the DNS provider.

      Setup DNS

      Provide your DigitalOcean API token and click Next.

      Cloudron will use these keys to configure the DNS and obtain Let’s Encrypt certificates for your domain. Cloudron will redirect to The browser address bar will show a green lock to indicate that the connection to your Cloudron installation is now secure. Complete the setup by providing a username and password.

      Setup Administrator

      Once you have setup an Administrator account, you’ll see the No apps installed yet! screen. You’ve finished setting up your Cloudron account. Next you can decide which apps to install.

      Step 3 — Installing Your Apps

      You’re now ready to start installing apps.

      When you click on App Store on the interface, Cloudron will prompt you to create a account. You’ll use this account to manage your subscription and billing. Cloudron is free to use for two apps.

      Create account

      Once you sign up, you can install over 50 apps with a single click. Clicking on an app will bring up the installation dialog. As an example, you can click on the WordPress icon and use the blog subdomain. Once you click Install, Cloudron automatically sets up everything necessary for each app, such as: DNS, databases, certificates, and so on.

      Install WordPress

      When installing an app, you can choose whether the app should integrate with Cloudron’s centralized User management. If you opt to use Cloudron User management, you can log in to the app with your Cloudron username and password. You can then add more users and groups on Cloudron and control if they have access to the app. If you opt to instead leave user management to the app, the app will be pre-setup with an admin account and its credentials will display after installation. You can add more users inside the app itself. Note that apps on Cloudron are always accessible externally—the access control setting only determines how login authentication is done.

      Once installed, you can access the app at


      You’ve installed an app to your Cloudron instance; you can use this process to install any of the available apps. To protect your data, you’ll configure backups in the next step.

      Step 4 — Configuring Backups

      Before using Cloudron in a production environment, it is essential to configure Cloudron to periodically save backups to a location that is external to the server. Unlike server snapshots, Cloudron creates backups individually for each app. The primary advantage of this approach is that apps can be individually rolled back, cloned, and even migrated to another new Cloudron installation.

      Cloudron can back up to any provider that supports S3 API or any external volume. In this tutorial, you will use DigitalOcean Spaces as the backup storage.

      With your DigitalOcean Space set up, you can use the associated API keys following this guide. Then, configure Cloudron backups by going to the Backups view and clicking Configure.

      Configure Backup on DO Spaces

      Cloudron will periodically store backups. If your server crashes or you want to move the server to a different DigitalOcean region, you can create a new Droplet, install Cloudron, and restore your server to the exact state from your backup.

      You’ve connected your Cloudron installation to your DigitalOcean Space and have configured backups. The next reviews some of the other features available with Cloudron.

      Step 5 — Exploring Other Features (Optional)

      Cloudron has centralized user management that allows you to invite team members and set up access control for each user.

      To add a new member, go to the Users view and click on New User. Cloudron will send the new user an email with a sign-up link.

      Users View

      A new user can sign up and start using any applications to which you’ve given them access. For the WordPress example in this tutorial, a new user could immediately access it since you installed the application with the User Management option set to Allow all users on this Cloudron.

      Another common task when managing your Cloudron instance, is installing apps on a domain other than the primary domain. To add a domain, go to the Domains view and click Add Domain. Once completed, you can install apps under this newly added domain.

      Domains View

      Security is always paramount and Cloudron provides turnkey security that includes tracking the details of your Cloudron installation. You can look in the Activity view to see all events logged for your Cloudron as well as all configuration changes.


      In this tutorial, you installed Cloudron on your server. You then installed the WordPress app without having to manually provision databases, configure DNS, set up certificates, and so on. This WordPress installation will get automatic updates for new releases of WordPress. You configured Cloudron to periodically save backups to DigitalOcean Spaces. Finally, you explored other features that can provide additional protection and features to your Cloudron.

      Manually installing apps on a server is an involved process that has more potential for errors and can be time consuming. Modern web applications use a variety of databases, frameworks, and package managers that can complicate the installation. Furthermore, securing and backing up your applications is a separate process. When manually installing apps to keep them up-to-date, it is necessary to diligently track upstream releases and then apply the updates. Cloudron is a solution that helps you easily deploy and maintain apps on your server.

      To learn some more about Cloudron features, you can consult the documentation pages.

      For questions and discussion, visit the forum.

      Source link

      10 Web Design Lessons You Can Learn From

      Learning to wield a lightsaber. Building the Death Star. Destroying the Death Star. These are all very technical, difficult things. But a few lessons that we can learn from a galaxy far, far away that aren’t so tough? How to design a website, courtesy of

      With the official fan site picking up Webbys, it’s obvious there’s plenty to emulate regardless of your star system. And while we don’t all have Disney’s pile of Imperial Credits, provides design takeaways for website owners on every budget. Here are the top 10.

      1. Clean Navigation is packed with tons of options. You can read up on the latest news, watch clips, and find games, to name a few. The amazing part isn’t the wealth of choices and information — it’s how easy it is to find it all.

      No matter what your site is about, having smooth and simple navigation is crucial. Design your site so that everything is categorized into logical groups, with straightforward navigation that allows visitors to jump from one section to another fluidly. And while there’s a lot on, the number of items in the top nav is limited, which prevents guests from feeling overwhelmed.

      2. Bold Graphics

      Can you imagine Star Wars without the opening crawl credits? And where would the flicks be without the Millennium Falcon going into hyper speed or Luke Skywalker facing off against Darth Vader? The striking, iconic images from the Star Wars films are a huge part of the series’ success. captures that bold, recognizable aesthetic on every page.

      The homepage

      Your site needs bold graphics to capture visitors’ attention. And although your logo probably doesn’t have global recognition, that doesn’t mean you shouldn’t play it up. Make that front and center on your home page so that clients know they’ve come to the right place.

      Using custom imagery that is a fit for your site is also crucial since you want to use these photos to convey what your website is all about. If you rely on too many stock photos, it could make your site feel generic, and that’s never a good thing.

      3. A Smart Search

      One could spend days scrolling through all the content on — but an efficient search tool means visitors can find exactly what they’re looking for with just a few keystrokes.

      There’s no point in having great content if visitors can’t easily find it, and a strong search engine is the simple answer. Don’t think too hard about the design for this one — the standard magnifying glass icon works every time. The top right corner is the most popular location, so stick to that to make it easy to spot.

      The search bar

      4. A Call to Action

      In most cases, this is getting people to sign up for your newsletter or updates from your site. On, that button is at the top right corner of the page, and the site makes it a cinch to register for an account.

      Make sure the call to action on your site is equally strong and clear to find, with a design that naturally draws the eye toward it. After all, one of the main reasons to have a website is to make a sale or gather contact information from clients, and this is often the best way to do so. The form should be quick and easy to fill out. Finally, make the language of the call-to-action button clear, such as “Buy Now,” “Join,” “Sign Up” or “Download.”

      5. Informational Footer

      When visitors come to your site on a mission looking for something in particular, it should be quick and easy to find. A footer is the ideal solution — visitors expect to scroll down and find a wealth of information, and by putting it at the bottom of the page, it won’t disrupt your design.

      This is where you should include contact information, background on your company, and a lot more — here are 27 footer ideas.

      The footer

      But aside from all those helpful links, your footer’s design should be simple, clean, and easy to use, visually playing off the rest of the site. For example, features a subtle image of Darth Vader with a gray font. Simple touches like that tie the site together.

      6. Community Forum

      What’s the key to any successful film franchise? Their fans, of course. And gives them a place to virtually meet and mingle — they’ve got a “Community” tab, which has tons of information on how people can get involved, plus all things created by fans: organizations, blogs, news sites, podcasts, collecting sites, and fan film awards. also allows comments on blog posts; by allowing visitors to interact with each other, they’ve created another avenue for engagement.

      To get your audience engaged — with you and other visitors — create specific places on your website for interaction. This could even be as simple as a monitored message board just to get the conversation going.

      7. Good Fonts

      These should play off your logo and general aesthetic. However, don’t go overboard on a font that looks great but is hard to read. sticks to an easy-to-read font in white, which makes it pop from the dark background, and color is only used as an accent so it never feels overwhelming.

      The blog

      Make sure that the font you choose looks good across browsers and devices and that you have the rights to use it. If you need help narrowing down your options, check out this list of the 40 best Google web fonts. They’re all open source and completely free for commercial use.

      8. A Social Media Toolbar displays how to find their galaxy on Instagram, Facebook, Twitter, YouTube, Tumblr, and Google+ not once, but twice — with a toolbar at the top left of the home page and again with a “follow us” bar at the very bottom. They know the importance of building a following not just on their site, but across all social media. social icons

      There are more social platforms than ever before. Which ones should you use to promote your website?

      9. Engaging Videos

      From behind-the-scenes clips to a weekly digital series direct from Lucas Headquarters, has mastered the art of using videos to engage visitors. Luckily, you don’t need George Lucas to create footage of your very own.

      With all the easy-to-use programs out there, it’s easy enough to play director. Videos are a fun way to get your message across, such as explaining what your site or business is all about — and it tells the story in a faster and more engaging way than a ton of text can. Just make sure that you optimize your videos so they don’t slow down your site.

      10. A Mobile Site

      More and more people are surfing the net on their phones and tablets, so your site has to be equipped for more than desktop perusing. On top of that, Google now filters sites that don’t offer a mobile option for users. is designed to look just as good on a tiny screen as a big one. Make sure that your site translates across devices as well.

      You Don’t Need the Force to Design a Great Website

      Make your site stand out with a professional design from our partners at RipeConcepts. Packages start at $299.

      Source link

      How To Deploy a Go Web Application with Docker and Nginx on Ubuntu 18.04

      The author selected the Free and Open Source Fund to receive a donation as part of the Write for DOnations program.


      Docker is the most common containerization software used today. It enables developers to easily package apps along with their environments, which allows for quicker iteration cycles and better resource efficiency, while providing the same desired environment on each run. Docker Compose is a container orchestration tool that facilitates modern app requirements. It allows you to run multiple interconnected containers at the same time. Instead of manually running containers, orchestration tools give developers the ability to control, scale, and extend a container simultaneously.

      The benefits of using Nginx as a front-end web server are its performance, configurability, and TLS termination, which frees the app from completing these tasks. The nginx-proxy is an automated system for Docker containers that greatly simplifies the process of configuring Nginx to serve as a reverse proxy. Its Let’s Encrypt add-on can accompany the nginx-proxy to automate the generation and renewal of certificates for proxied containers.

      In this tutorial, you will deploy an example Go web application with gorilla/mux as the request router and Nginx as the web server, all inside Docker containers, orchestrated by Docker Compose. You’ll use nginx-proxy with the Let’s Encrypt add-on as the reverse proxy. At the end of this tutorial, you will have deployed a Go web app accessible at your domain with multiple routes, using Docker and secured with Let’s Encrypt certificates.


      Step 1 — Creating an Example Go Web App

      In this step, you will set up your workspace and create a simple Go web app, which you’ll later containerize. The Go app will use the powerful gorilla/mux request router, chosen for its flexibility and speed.

      Start off by logging in as sammy:

      For this tutorial, you'll store all data under ~/go-docker. Run the following command to do this:

      Navigate to it:

      You'll store your example Go web app in a file named main.go. Create it using your text editor:

      Add the following lines:


      package main
      import (
      func main() {
          r := mux.NewRouter()
          r.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
              fmt.Fprintf(w, "<h1>This is the homepage. Try /hello and /hello/Sammyn</h1>")
          r.HandleFunc("/hello", func(w http.ResponseWriter, r *http.Request) {
              fmt.Fprintf(w, "<h1>Hello from Docker!n</h1>")
          r.HandleFunc("/hello/{name}", func(w http.ResponseWriter, r *http.Request) {
              vars := mux.Vars(r)
              title := vars["name"]
              fmt.Fprintf(w, "<h1>Hello, %s!n</h1>", title)
          http.ListenAndServe(":80", r)

      You first import net/http and gorilla/mux packages, which provide HTTP server functionality and routing.

      The gorilla/mux package implements an easier and more powerful request router and dispatcher, while at the same time maintaining interface compatibility with the standard router. Here, you instantiate a new mux router and store it in variable r. Then, you define three routes: /, /hello, and /hello/{name}. The first (/) serves as the homepage and you include a message for the page. The second (/hello) returns a greeting to the visitor. For the third route (/hello/{name}) you specify that it should take a name as a parameter and show a greeting message with the name inserted.

      At the end of your file, you start the HTTP server with http.ListenAndServe and instruct it to listen on port 80, using the router you configured.

      Save and close the file.

      Before running your Go app, you first need to compile and pack it for execution inside a Docker container. Go is a compiled language, so before a program can run, the compiler translates the programming code into executable machine code.

      You've set up your workspace and created an example Go web app. Next, you will deploy nginx-proxy with an automated Let's Encrypt certificate provision.

      Step 2 — Deploying nginx-proxy with Let's Encrypt

      It's important that you secure your app with HTTPS. To accomplish this, you'll deploy nginx-proxy via Docker Compose, along with its Let's Encrypt add-on. This secures Docker containers proxied using nginx-proxy, and takes care of securing your app through HTTPS by automatically handling TLS certificate creation and renewal.

      You'll be storing the Docker Compose configuration for nginx-proxy in a file named nginx-proxy-compose.yaml. Create it by running:

      • nano nginx-proxy-compose.yaml

      Add the following lines to the file:


      version: '2'
          restart: always
          image: jwilder/nginx-proxy
            - "80:80"
            - "443:443"
            - "/etc/nginx/vhost.d"
            - "/usr/share/nginx/html"
            - "/var/run/docker.sock:/tmp/docker.sock:ro"
            - "/etc/nginx/certs"
          restart: always
          image: jrcs/letsencrypt-nginx-proxy-companion
            - "/var/run/docker.sock:/var/run/docker.sock:ro"
            - "nginx-proxy"

      Here you're defining two containers: one for nginx-proxy and one for its Let's Encrypt add-on (letsencrypt-nginx-proxy-companion). For the proxy, you specify the image jwilder/nginx-proxy, expose and map HTTP and HTTPS ports, and finally define volumes that will be accessible to the container for persisting Nginx-related data.

      In the second block, you name the image for the Let's Encrypt add-on configuration. Then, you configure access to Docker's socket by defining a volume and then the existing volumes from the proxy container to inherit. Both containers have the restart property set to always, which instructs Docker to always keep them up (in the case of a crash or a system reboot).

      Save and close the file.

      Deploy the nginx-proxy by running:

      • docker-compose -f nginx-proxy-compose.yaml up -d

      Docker Compose accepts a custom named file via the -f flag. The up command runs the containers, and the -d flag, detached mode, instructs it to run the containers in the background.

      Your final output will look like this:


      Creating network "go-docker_default" with the default driver Pulling nginx-proxy (jwilder/nginx-proxy:)... latest: Pulling from jwilder/nginx-proxy a5a6f2f73cd8: Pull complete 2343eb083a4e: Pull complete ... Digest: sha256:619f390f49c62ece1f21dfa162fa5748e6ada15742e034fb86127e6f443b40bd Status: Downloaded newer image for jwilder/nginx-proxy:latest Pulling letsencrypt-nginx-proxy-companion (jrcs/letsencrypt-nginx-proxy-companion:)... latest: Pulling from jrcs/letsencrypt-nginx-proxy-companion ... Creating go-docker_nginx-proxy_1 ... done Creating go-docker_letsencrypt-nginx-proxy-companion_1 ... done

      You've deployed nginx-proxy and its Let's Encrypt companion using Docker Compose. Next, you'll create a Dockerfile for your Go web app.

      Step 3 — Dockerizing the Go Web App

      In this section, you will create a Dockerfile containing instructions on how Docker will create an immutable image for your Go web app. Docker builds an immutable app image—similar to a snapshot of the container—using the instructions found in the Dockerfile. The image's immutability guarantees the same environment each time a container, based on the particular image, is run.

      Create the Dockerfile with your text editor:

      Add the following lines:


      FROM golang:alpine AS build
      RUN apk --no-cache add gcc g++ make git
      WORKDIR /go/src/app
      COPY . .
      RUN go get ./...
      RUN GOOS=linux go build -ldflags="-s -w" -o ./bin/web-app ./main.go
      FROM alpine:3.9
      RUN apk --no-cache add ca-certificates
      WORKDIR /usr/bin
      COPY --from=build /go/src/app/bin /go/bin
      EXPOSE 80
      ENTRYPOINT /go/bin/web-app --port 80

      This Dockerfile has two stages. The first stage uses the golang:alpine base, which contains pre-installed Go on Alpine Linux.

      Then you install gcc, g++, make, and git as the necessary compilation tools for your Go app. You set the working directory to /go/src/app, which is under the default GOPATH. You also copy the content of the current directory into the container. The first stage concludes with recursively fetching the packages used from the code and compiling the main.go file for release without symbol and debug info (by passing -ldflags="-s -w"). When you compile a Go program it keeps a separate part of the binary that would be used for debugging, however, this extra information uses memory, and is not necessary to preserve when deploying to a production environment.

      The second stage bases itself on alpine:3.9 (Alpine Linux 3.9). It installs trusted CA certificates, copies the compiled app binaries from the first stage to the current image, exposes port 80, and sets the app binary as the image entry point.

      Save and close the file.

      You've created a Dockerfile for your Go app that will fetch its packages, compile it for release, and run it upon container creation. In the next step, you will create the Docker Compose yaml file and test the app by running it in Docker.

      Step 4 — Creating and Running the Docker Compose File

      Now, you'll create the Docker Compose config file and write the necessary configuration for running the Docker image you created in the previous step. Then, you will run it and check if it works correctly. In general, the Docker Compose config file specifies the containers, their settings, networks, and volumes that the app requires. You can also specify that these elements can start and stop as one at the same time.

      You will be storing the Docker Compose configuration for the Go web app in a file named go-app-compose.yaml. Create it by running:

      Add the following lines to this file:


      version: '2'
          restart: always
            dockerfile: Dockerfile
            context: .

      Remember to replace both times with your domain name. Save and close the file.

      This Docker Compose configuration contains one container (go-web-app), which will be your Go web app. It builds the app using the Dockerfile you've created in the previous step, and takes the current directory, which contains the source code, as the context for building. Furthermore, it sets two environment variables: VIRTUAL_HOST and LETSENCRYPT_HOST. nginx-proxy uses VIRTUAL_HOST to know from which domain to accept the requests. LETSENCRYPT_HOST specifies the domain name for generating TLS certificates, and must be the same as VIRTUAL_HOST, unless you specify a wildcard domain.

      Now, you'll run your Go web app in the background via Docker Compose with the following command:

      • docker-compose -f go-app-compose.yaml up -d

      Your final output will look like the following:


      Creating network "go-docker_default" with the default driver Building go-web-app Step 1/12 : FROM golang:alpine AS build ---> b97a72b8e97d ... Successfully tagged go-docker_go-web-app:latest WARNING: Image for service go-web-app was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`. Creating go-docker_go-web-app_1 ... done

      If you review the output presented after running the command, Docker logged every step of building the app image according to the configuration in your Dockerfile.

      You can now navigate to to see your homepage. At your web app's home address, you're seeing the page as a result of the / route you defined in the first step.

      This is the homepage. Try /hello and /hello/Sammy

      Now navigate to You will see the message you defined in your code for the /hello route from Step 1.

      Hello from Docker!

      Finally, try appending a name to your web app's address to test the other route, like:

      Hello, Sammy!

      Note: In the case that you receive an error about invalid TLS certificates, wait a few minutes for the Let's Encrypt add-on to provision the certificates. If you are still getting errors after a short time, double check what you've entered against the commands and configuration shown in this step.

      You've created the Docker Compose file and written configuration for running your Go app inside a container. To finish, you navigated to your domain to check that the gorilla/mux router setup is serving requests to your Dockerized Go web app correctly.


      You have now successfully deployed your Go web app with Docker and Nginx on Ubuntu 18.04. With Docker, maintaining applications becomes less of a hassle, because the environment the app is executed in is guaranteed to be the same each time it's run. The gorilla/mux package has excellent documentation and offers more sophisticated features, such as naming routes and serving static files. For more control over the Go HTTP server module, such as defining custom timeouts, visit the official docs.

      Source link