One place for hosting & domains


      The Complete Website Maintenance Checklist (20 Things You NEED to Do This Year)

      Affiliate Disclosure: DreamHost maintains relationships with some of our recommended partners, so if you click through a link and purchase, we may receive a commission. We only recommend solutions we believe in.

      Your site may be running smoothly now. However, there’s no guarantee that it will perform at this optimal level forever.

      Similar to a vehicle, your website requires ongoing work to keep it in tip-top condition. That’s why we’ve created this complete website maintenance checklist for your WordPress site.

      In this post, we’ll discuss why maintenance is the key to a high-performing, secure, and profitable online presence. We’ll then share a whopping 20 maintenance tasks that you need to do this year. We’ve organized the tasks based on how often you need to complete them to keep your site spick and span:

      Let’s get started!

      Why Site Maintenance Matters

      If you neglect important maintenance tasks, then the consequences can be disastrous. During the first six months of 2021, the Wordfence Web Application Firewall blocked over 4 billion malicious requests. With people actively trying to break into WordPress websites, even a small lapse in security could put your site at serious risk.

      WordPress maintenance isn’t just about spotting the big issues, though.

      Over time, small problems can gradually diminish your site’s performance and search engine rankings. By pinpointing and addressing these minor errors early, you can reduce the negative impact they can have on your site.

      Maintenance also involves evaluating various aspects of your site. This puts you in a strong position to identify opportunities to optimize your content and drive more conversions. In this way, you can keep your site ahead of the pack.

      Get Your Site Up to Date

      Technology is constantly moving forward and keeping up can be a chore. We’ll upgrade your outdated, insecure software to get you back on track.

      Weekly Tasks

      Let’s start with regular maintenance tasks. Here are five things we recommend you perform every single week.

      1. Review Your Metrics

      Most successful websites record a range of data. This includes tracking how visitors behave, your best traffic sources, and the content that drives the most conversions.

      By regularly analyzing your metrics, you can pinpoint problems that need to be addressed. Here, speed is everything. To remain competitive, it helps to review this data weekly.

      The Google Analytics dashboard.

      When viewed in isolation, you may struggle to properly evaluate your performance. If this is the case, you might also want to review your competitor’s metrics.

      2. Back Up Your Site

      Creating regular backups is one of the most important items on your to-do list. If you fall behind, then you risk losing all of your recent work — or even your entire website.

      While you can create backups manually, some hosting providers can perform this vital maintenance task for you. For example, at DreamHost, we offer automated daily backups.

      If you need to back up on-demand, you can also create a copy of your site with a single click. We store all of your backups in a central location and offer easy one-click restore for added convenience.

      3. Moderate Comments

      A lively comment section encourages visitors to interact with your site. However, comment sections can have a dark side. Attackers may try to trick you into publishing malicious content in the form of comment spam.

      Some comments may also contain irrelevant or offensive content. This can reflect poorly on your website. For this reason, you may want to use a comment moderation plugin such as Akismet Anti-Spam.

      The Akismet Anti-Spam plugin.

      You can also hold all submissions in an approval queue, using WordPress’ default settings. Visitors will expect their comments to appear on your site within a reasonable timeframe. If you withhold comments for review, it’s smart to check this queue at least once per week.

      4. Update Your Themes and Plugins

      According to research, 86% of hacked WordPress websites contain an outdated plugin or theme or even an outdated version of WordPress. This makes sense, as updates often contain fixes for known vulnerabilities or new security features.

      To keep the bad guys out, it’s smart to regularly check the WordPress dashboard for any available updates.

      The WordPress updates dashboard.

      While we’re including this task in our maintenance checklist, you may want to consider enabling auto-updates for your themes and plugins for added security. Assuming that you’re running WordPress 5.6 or higher, you can also enable auto-updates for WordPress core in the Dashboard > Updates menu.

      5. Scan for Malware

      WordPress has a good reputation as a secure platform, but no software is perfect. To keep your site in tip-top shape, it’s important to check for malware. Our DreamShield add-on can automatically scan your site for malicious code on a weekly basis.

      Activating the DreamShield add-on.

      If DreamShield detects an issue, it’ll notify you via the DreamHost panel and via email. This email will contain step-by-step instructions that show you how to resolve this problem and restore your site to optimal health.

      Protect Your Website with DreamShield

      For just $3/month, our premium security add-on scans your site weekly to ensure it is free of malicious code.

      Monthly Tasks

      By monitoring your site’s speed and search engine performance, you can stay one step ahead of the competition. With that in mind, here’s your monthly website maintenance checklist.

      6. Test Your Site’s Speed

      Your site’s performance has a huge impact on its success. Studies suggest that 40% of people abandon a site that takes longer than three seconds to load. Even if visitors do stick around, a sluggish website is unlikely to impress potential customers.

      Page speed can also impact your SEO, particularly with the launch of the Core Web Vitals project.

      You can test your site’s speed using a tool such as Google PageSpeed Insights or GTmetrix.

      The GTmetrix performance monitoring tool.

      If you’re concerned about your Core Web Vitals performance, Google has also created a dedicated reporting tool. This evaluates your site against the specific Core Web Vitals metrics.

      7. Create New Content

      Regularly publishing interesting, relevant content is a tried-and-tested way to convert one-off visitors into loyal repeat customers. Content can also position you as an expert in your industry, which is great for conversions.

      It isn’t just people who read your posts and pages. Search engines will also use this content to understand what your site is about. So by regularly publishing materials such as blog posts and articles, you can maximize your chances of appearing in relevant search engine results.

      To ensure that you’re winning the Search Engine Optimization (SEO) game, you may want to consider partnering with an experienced SEO team. Our experts can create and publish a stream of five-star content tailormade to support your keyword strategy.

      8. Improve Your Site’s SEO

      With 40–60 billion searches happening on Google in the U.S. every single month, SEO is one maintenance task that you can’t afford to overlook. As an established site, chances are you’ve already identified the keywords that you want to rank for. However, keyword popularity can change over time, so it helps to check whether you need to adjust your approach.

      You can view the current search volume using a tool such as Semrush’s Keyword Overview or Keyword Magic tools. We’re so confident that you’ll love using Semrush, we’ve partnered with them to give you a 14-day pro trial for free. [f]

      Semrush & DreamHost Start your free 14-day trial

      Once you’ve made any necessary changes to your keyword strategy, you’ll need to review every part of your site to ensure that it’s helping you rank for those terms. That’s no easy feat!

      To help you out, we’ve created the DreamHost SEO Toolkit. With over 100 automated checks and verifications, you can use this add-on to create a personalized SEO plan. It can also help you implement your SEO strategy via powerful on-page optimization tools. You can add SEO Toolkit to your hosting plan for just $4.99/mo per site.

      Quarterly Tasks

      Let’s take a look at some website elements that are too often overlooked. Here are seven tasks to perform every quarter.

      9. Change Your Passwords

      A strong, complex password is essential for preventing unauthorized access to your website. When creating your password, it’s essential that you follow all the latest best practices, such as using two-factor authentication.

      Even if you’re following the rules, it’s still smart to change your password every quarter. Then, even if your password does get compromised, it will minimize the time the hacker remains inside your hacked account.

      Hacked Site? We’ll Fix It Fast

      With our Hacked Site Repair service, we’ll remove any malicious code and restore your website so it’s back up and running fast.

      10. Check and Fix Broken Links

      Broken links can occur for many reasons. For example, you might delete a page or implement a redirect incorrectly.

      They may be common, but these URLs are disastrous for the User Experience (UX) and your SEO. When search engine bots encounter a broken URL, they’ll crawl that link to verify that it’s broken. This wastes precious crawl budget.

      You can scan for broken URLs using tools such as Semrush.

      Semrush’s Site Audit feature.

      Semrush will scan your site and display any broken URLs in the Crawled pages section.

      Sometimes, you may be able to fix a broken link by manually adjusting the URL. Alternatively, you can use a plugin such as Redirection.

      11. Delete Unnecessary Plugins and Themes

      Every theme or plugin adds code to your website, which is a potential loophole for hackers to exploit. In fact, themes and plugins account for 96% of WordPress vulnerabilities.

      It’s a good idea to regularly take stock of the themes and plugins installed on your site and delete any you no longer require.

      You may be tempted to simply disable the software in question, just in case you need to reactivate it at a later date. However, hackers may still be able to access deactivated code, so deletion is always the safest option.

      The WordPress plugin management page.

      You can further reduce your attack surface by removing any images, videos, or audio files that you no longer require. To achieve this, connect to your site using a Secure File Transfer Protocol (SFTP) client, then head to the wp-content directory to locate and delete those unnecessary files.

      12. Optimize Your Database

      WordPress stores all of your data and content in a database. The larger your database, the longer it will take the server to retrieve information from your tables.

      By optimizing your database, you can reduce the server load and boost your page load times. You can optimize your database using phpMyAdmin. DreamHost customers can access this tool via their hosting account.

      Logging into phpMyAdmin through your DreamHost panel.

      In phpMyAdmin, navigate to Databases. You can then select the database that you want to optimize.

      13. Test Your Site’s Forms

      Many websites use forms to capture leads and drive conversions. Some forms also deliver core functionality, including login forms.

      An example of a login form.

      Since they’re so important, it’s wise to check that your forms are functioning correctly. We recommend reviewing the entire submission process, including ensuring that you’re logging user input correctly.

      14. Test Your Checkout Process

      If you accept payments via your website, then the checkout process is at the heart of your business. If there’s an issue with this process, then you could be missing out on countless sales. In the worst-case scenario, your system may be completely broken, which will bring your revenue to zero.

      With this in mind, we recommend verifying that your checkout is working as expected. Most payment solutions have a dedicated testing mode, including the popular WooCommerce platform.

      During testing, it’s smart to look for any opportunities to improve the purchasing process. A complex payment process can prevent customers from crossing that finish line. In fact, 34% of shoppers will abandon their carts if they’re forced to create an account.

      If you can streamline the payment process as part of your review, it may do wonders for your bottom line.

      15. Check Your Social Media Links

      Social media is a powerful tool for reaching a wider audience and retaining your existing one. By frequently posting across social platforms, you can keep your company at the forefront of your followers’ minds and ensure that they remain engaged over the long term. Many websites feature prominent social media buttons, including links to follow your accounts and share your content.

      Social sharing buttons on the DreamHost blog.

      However, when dealing with third-party tools, there’s always a chance they may change how they process your requests. They may even implement technological changes that affect your site’s social content.

      If your social URLs are broken, then you could be missing out on countless followers and shares. Therefore, it’s important to check them once in a while to make sure that they work.

      You’re Cordially Invited

      Join DreamHost’s Facebook group to connect with like-minded website owners and get advice from peers and experts alike!

      Annual Tasks

      You don’t have to perform these tasks multiple times a year. However, we recommend setting aside the time to perform them annually.

      16. Schedule User Testing

      This is where you evaluate how intuitive your website is by testing it on real-life users. Chances are you performed at least one round of usability testing when you first designed your website.

      However, the way people interact with websites has a tendency to evolve over time. New technical innovations, devices, or browser updates can dramatically change how your typical internet user interacts with your website.

      To ensure that you continue to provide a good experience, we recommend scheduling annual usability testing.

      17. Review Your Domain and Hosting Renewals

      Choosing a domain name is one of the most important decisions you can make. A good domain will become an integral part of your branding.

      Now, imagine losing this essential part of your online identity. If you fall behind on your renewals, then you might try to access your site one day, only to discover that your domain has expired. Therefore, it’s smart to check your domain and hosting renewal status.

      Even if you activate auto-renewals, we still recommend manually verifying that everything is set up correctly, particularly your payment information. If your credit card has expired, the renewal will fail, and you may lose access to your domain or web hosting.

      18. Update Your Header, Footer, and Legal Policies

      Your header and footer are prime digital real estate. Typically, you’ll use these elements to display useful information, such as your contact details or opening hours. If this information is out of date, then you may lose out on conversions.

      The DreamHost footer.

      If you make any significant changes to your operations, you must immediately update the header and footer. However, it never hurts to perform an annual check just to ensure that no changes have slipped through the cracks.

      The header and footer also appear across your website. This makes them perfect for putting your most important pages at the audience’s fingertips.

      While reviewing these elements, consider removing any links that are no longer relevant. There may also be some new content that deserves a top spot in your header or footer.

      Most websites feature various legal policies, including a privacy policy and copyright information. Laws can evolve over time, so it’s always worth verifying that you’re in line with the latest regulations.

      19. Review Your ‘About’ Page

      A compelling About page can convince customers that you’re a company worth doing business with. It can also give people a sense of who you are as individuals.

      The DreamHost About Us page.

      Despite its importance, too many companies write their About page and then never revisit it. To ensure that this page is always representative of your company, it’s worth performing an annual review.

      An example of an About Us page.

      You can look for opportunities to add exciting developments, such as a major new client. You might also update any outdated information, such as changing an employee’s bio to reflect their new job title.

      20. Perform a Content Audit

      Publishing engaging, relevant content signals to visitors that your site is active and that you’re an expert in your field. This content can also help you improve your search engine rankings.

      To ensure that you’re getting maximum value from this content, we recommend performing an annual content audit. This is where you catalog all of your site’s content and evaluate its performance.

      This way, you can identify the topics and formats that attract the largest traffic and drive the most conversions. Conversely, you can pinpoint the content that doesn’t appear to resonate with your target audience. This is invaluable information that you can use to refine your content strategy.

      Ready to try the WordPress Website Maintenance Checklist?

      The hard work doesn’t end just because you’ve published your website. Running a successful WordPress site requires ongoing effort — and regular maintenance.

      By breaking this challenge into 20 tasks, you can keep your site in tip-top shape without becoming overwhelmed. In addition, if you add the right tools and services to the mix, you may be able to further reduce your workload.

      Running a website isn’t always easy, so why not let us lighten the load?

      Our DreamCare Service puts a team of DreamHost experts at your fingertips. With our 24/7 professional website monitoring, managed updates, and monthly security reviews, you can be confident that you’re smashing every item on your maintenance checklist.

      Source link

      How to Create and Deploy Your First Eleventy Website

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

      Eleventy (also known as 11ty) is a static site generator (SSG) for building websites. It was launched in 2017 by Zach Leatherman as a JavaScript-based alternative to Jekyll, one of the first mainstream SSGs, which is written in Ruby. Eleventy has gained a reputation as one of the most flexible and performant options for building static websites, leading to steadily rising adoption rates in the Jamstack ecosystem.

      It’s important to note that Eleventy is not a JavaScript framework, and it does not include any client-side JavaScript. It takes template files specified in HTML, Markdown, or your choice of templating language, and outputs a complete, static website ready to be deployed to a web server of your choice.

      While most other SSGs are restricted to just one templating language, Eleventy supports multiple templating languages, such as HTML, Liquid, Markdown, Nunjucks, Handlebars, moustache, EJS, Haml, Pug, etc., and you can even combine them in the same project. This flexibility is one of the things that makes Eleventy stand out from its competition.

      In this tutorial, you’ll develop a static website from scratch with Eleventy and deploy it to DigitalOcean’s App Platform for free.


      To complete this tutorial, you will need:

      Step 1 — Setting Up the Project

      Unlike competitors such as Jekyll and Hugo, Eleventy does not provide a way to scaffold a new project, so you’ll need to create a regular Node.js project, and then add Eleventy as a dependency.

      The first step is to launch the terminal on your computer, create a new directory somewhere on your filesystem, and change into it as shown below.

      • mkdir eleventy-blog
      • cd eleventy-blog

      At the root of the eleventy-blog directory, initialize the project with a package.json file with npm init -y, and install Eleventy as a development dependency by passing the -D flag to the install subcommand.

      • npm init -y
      • npm install -D @11ty/eleventy

      Once the Eleventy package is installed, inspect the contents of your project directory with ls. It will contain a package.json file, a package-lock.json file, and a node_modules directory.

      The output should look similar to this:


      node_modules package-lock.json package.json

      Open the package.json file in your favorite text editor, then replace the existing scripts property with the highlighted lines below.


        "name": "eleventy-blog",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "build": "eleventy",
          "start": "eleventy --serve"
        "keywords": [],
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@11ty/eleventy": "^0.12.1"

      There are two scripts here: build for building the website files, and start for running the Eleventy web server on http://localhost:8080.

      Save the file, and then run the command below to build the website:

      The output should look similar to this:


      > eleventy-blog@1.0.0 build > eleventy Wrote 0 files in 0.04 seconds (v0.12.1)

      The output indicates that you haven’t created any files yet, so there is nothing to build. In the next step, you’ll begin adding the necessary files that are needed for the website.

      The final directory structure of the project you’ll be working on is shown below. You’ll start from an empty directory, and incrementally add new features until you arrive at this structure.

      ├── about
      │   └──
      ├── css
      │   └── style.css
      ├── _data
      │   └── site.json
      ├── _includes
      │   ├── layouts
      │   │   ├── base.njk
      │   │   ├── page.njk
      │   │   └── post.njk
      │   └── nav.njk
      ├── index.njk
      ├── node_modules
      ├── package.json
      ├── package-lock.json
      ├── posts
      │   ├──
      │   ├──
      │   └──
      └── _site
          ├── about
          │   └── index.html
          ├── css
          │   └── style.css
          ├── index.html
          └── posts
              ├── first-post
              │   └── index.html
              ├── second-post
              │   └── index.html
              └── third-post
                  └── index.html

      In this step, you created a Node.js project and added Eleventy as a dependency. In the next step, you’ll choose a templating language.

      Step 2 — Choosing a Templating Language

      For the purpose of this tutorial, we’ll use the Nunjucks template, a common choice for many Eleventy projects. (Depending on your preference, you could also choose a different templating language.)

      In the root of your project directory, create an index.njk file and open it in your text editor. Add a “Hello world” message to the file as shown below, then save the file.


      <h1>Hello, world!</h1>

      Once saved, run the build command again. It will convert the index.njk file to an index.html file and output it into a new _site directory at the root of the project.

      The output should look similar to this:


      > eleventy-blog@1.0.0 build > eleventy Writing _site/index.html from ./index.njk. Wrote 1 file in 0.08 seconds (v0.12.1)

      At this point, you can view the website in the browser by starting a development server at http://localhost:8080 as shown below.

      The output should look similar to this:


      > eleventy-blog@1.0.0 start > eleventy --serve Writing _site/index.html from ./index.njk. Wrote 1 file in 0.08 seconds (v0.12.1) Watching.. [Browsersync] Access URLs: ----------------------------------- Local: http://localhost:8080 External: ----------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 ----------------------------------- [Browsersync] Serving files from: _site

      If you wish to use a different port, you can specify it through the --port option, as shown here:

      • npm start -- --port 4040 to set a different port

      The -- separator in the command above is used to distinguish the parameters passed to npm command itself from those passed to the script. After starting the development server, open http://localhost:8080 in your web browser to see the site in action. You can exit the server at any time by pressing Ctrl + C on your keyboard.

      Eleventy hello world in Microsoft Edge

      In this step, you used Nunjucks as the templating language and began building a website. In the next section, you’ll learn about layouts in Eleventy and create a homepage for the website.

      Step 3 — Creating the Homepage

      In order to make your project more flexible and scalable from the start, you’ll need to create a base template that will be applied to all the pages of the site. Conventionally, this is called the base layout, and it needs to go into a layouts directory nested within an _includes directory. Create the _includes/layouts directory using the command below:

      • mkdir -p _includes/layouts

      In the _includes/layouts directory, create a base.njk file and open it in your text editor. Copy and paste the following code into the file. This is basic HTML5 boilerplate that will serve as the foundation for all the pages on the website.


      <!DOCTYPE html>
      <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{ title }}</title>
          <h1>{{ title }}</h1>
          {{ content | safe }}

      The contents in double curly braces are Nunjucks variables that will be replaced accordingly when a derivative page is being built. The {{ title }} variable will be supplied through the page’s front matter block while the {{ content }} will be replaced with all incoming page content that is not part of the front matter. The latter is piped through the safe filter to prevent it from being escaped.

      Return to the index.njk file in your project root, and modify it as shown below:


      title: Homepage
      layout: layouts/base.njk
      <h1>Welcome to this brand new Eleventy website!</h1>

      The contents on either side of the triple dashes constitute the front matter of the file, while the rest of the file is what will be passed to your layouts as its content. In the front matter, the title and layout of the file are specified accordingly.

      If your development server is still running, head over to your site’s localhost URL to view the changes, or start the server first with npm start before attempting to view it in a web browser.

      Eleventy homepage in action

      As you can see from the above screenshot, the base.njk template has taken effect on the homepage.

      In this step, you added a base template for the pages of your site, and created a homepage. However, it doesn’t yet have any styling beyond the browser defaults. In the next section, you’ll improve the design of the website by adding a navigation menu.

      The _includes directory is where you’ll place the different components of the website. The contents of this directory are partial files that can be placed in your layout files to facilitate reuse. In this section, you’ll create the navigation menu as a partial, and include it in the base layout.

      In the _includes directory, create a new file called nav.njk. Open it in your editor and populate it with the code below. It is the markup for the top navigation bar, and it includes the title of the site as well as links to the homepage and a yet-to-be created “About” page.


      <nav class="navbar is-light" role="navigation" aria-label="main navigation">
        <div class="navbar-start">
          <div class="navbar-item has-text-weight-bold">
            My Eleventy Blog
        <div class="navbar-end">
          <a href="" class="navbar-item">
          <a href="" class="navbar-item">
            About Me

      Save and close the nav.njk file, and open the base template file (_includes/layouts/base.njk) in your editor. Go ahead and include the new navigation partial in this file through the include syntax shown below:


      <!DOCTYPE html>
      <html lang="en">
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>{{ title }}</title>
          <header>{% include "nav.njk" %}</header>
            {{ content | safe }}

      In the browser, the site should look like this:


      When you check the home page once again, the navigation menu should show up just like in the screenshot above. The title of the site “My Eleventy Blog” is hardcoded into the nav partial, but this is suboptimal because it’s likely that you will repeat the title elsewhere on the site, and changing it later becomes tedious since you’ll then have to find each place it was used.

      A better approach is to supply this value through a global data file. These are JSON files placed in a _data directory at the project root that provide global data accessible to all template files. At the project root, create a _data directory, followed by a site.json file within it. Open site.json in your text editor and specify the site’s title using the code below.


        "title": "My Eleventy Blog",
        "url": "",
        "language": "en-US",
        "description": "A simple blog with awesome content"

      At this point, you can save and close the file, then return to the nav.njk file in the _includes directory and replace the hardcoded site title with the appropriate variable.


      . . .
      <div class="navbar-item has-text-weight-bold">
        {{ site.title }}
      . . .

      The site should look exactly the same as before, but this small change makes setting and updating global data much easier. One thing to note about global variables is that they are scoped to the name of the JSON file, which is why we used {{ site.title }} above. You can create other data files as needed, and use them in your templates. For example, you can have an author.json file that contains your personal details such as your name, bio, and links to your social media profiles. Such data could then be accessed through variables (such as {{ }}) on any page of the website.

      Return to your index.njk file at the project root and update its contents as shown below so that it uses the site title and description:


      title: Homepage
      layout: layouts/base.njk
      <section class="hero is-medium is-primary is-bold">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">{{ site.title }}</h1>
            <h2 class="subtitle">{{ site.description }}</h2>

      In the browser, the site should look like this:

      Updated homepage

      In this step, you added a navigation menu to the website. However, the site is using default styling. In the next section, you’ll style the website using the Bulma CSS framework, which provides flexbox-based frontend components for building responsive websites.

      Step 5 — Adding a Stylesheet

      At the moment, Eleventy does not recognize CSS files for auto-inclusion in the build directory, so a few extra steps are needed to get this working. Specifically, you’ll need to create a stylesheet directory, and ensure that it is copied over to the build output (_site) when the site is built. You’ll also need to ensure that modifying a stylesheet triggers a rebuild and automatic refreshing in the web browser. You can achieved this by creating a configuration file for Eleventy.

      At the project root, create a css folder followed by a style.css file within it. Open style.css and import the Bulma CSS framework by using the code below:


      @import "";

      Save the file.

      Next, create an .eleventy.js file in your project root. This is the configuration file for Eleventy, similar to _config.yml files in Jekyll projects. Note that this file will be hidden in your filesystem since it’s prefixed with a period. You’ll need to use ls -a to get it to show up when listing the directory’s contents.

      Open .eleventy.js in your text editor and paste the following to include the css directory in the build, and also to watch the folder for changes:


      module.exports = function (eleventyConfig) {
        // Copy the `css` directory to the output
        // Watch the `css` directory for changes

      At this point, you need to stop the server with Ctrl+C, and start it again with npm start before the changes take effect. You’ll need to do this every time you modify the configuration file.

      If you check the site in your browser right now, you won’t notice any changes. That’s because the stylesheet has not yet been linked in any template. Go ahead and add it to the base.njk template as shown below.


      <!DOCTYPE html>
      <html lang="en">
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="stylesheet" href="" />
          <title>{{ title }}</title>
          <header>{% include "nav.njk" %}</header>
            {{ content | safe }}

      After saving the file, the styles should kick in immediately.

      Styled homepage

      In this step, you added styling to the website using the Bulma CSS framework. In the next step, you’ll expand the site by creating an “About” page.

      Step 6 — Creating an About Page

      At the moment, there is a link to a non-existent “About” page in the navigation menu. You’ll change that by creating a unique layout for all static pages, and afterward, the “About” page itself. In the _includes/layouts folder, create a page.njk file. This will be the layout for all static pages on the site.

      Open the new file in your editor and populate it with the code below. The front matter layout property is used to indicate that the page layout should inherit from the previously created base.njk template. This is known as layout chaining, and it allows us to reuse a template while adding unique elements that are specific to the new template, which helps avoid unnecessary repetition of basic site structures.


      layout: layouts/base.njk
      <article class="page-layout">
        <div class="container">
          <div class="columns">
            <div class="column is-8 is-offset-2">
              <div class="content mt-5">
                <h1>{{ title }}</h1>
                {{ content | safe }}

      Now that you have a page layout, you can create the “About” page. To do this, create a directory at the project root called about, and add a new markdown file within it.

      Add the following code into the file:


      title: About Me
      layout: layouts/page.njk
      I am a person that writes stuff.

      After saving the file, go to https://localhost:8080/about. The page should load correctly with the specified layout.

      About page

      Creating other pages, such as a contact page or newsletter page, can be done in the same way: create a directory with the name of the page, then add an file at the root of the new directory. You can also use an HTML or Nunjucks file instead of Markdown if you prefer.

      In this step, you created a unique layout for static pages and added an “About” page to the site. In the next section, you’ll create and process blog posts on an Eleventy website.

      Step 7 — Creating Posts

      Creating a blog post is very similar to creating a page. You’ll start by creating a directory called posts at the project root to keep all posts.

      However, you will create a different layout for posts. It’s going to be similar to the layout for pages, but you will include a date to differentiate it. In a real-world project, it’s likely that you’ll want different layouts for posts and pages, so it’s good practice to create a new layout for each one.

      In the _includes/layouts directory, create a new post.njk file and open it in your text editor. Paste the code below into your post.njk layout file.


      layout: layouts/base.njk
      <section class="page-layout">
        <div class="container">
          <div class="columns">
            <div class="column is-8 is-offset-2">
              <article class="content mt-5">
                <h1 class="title">{{ title }}</h1>
                <p class="subtitle is-6">
                  Published on: <time datetime="{{ }}">{{ }}</time>
                {{ content | safe }}

      Similar to the page.njk template, the post template extends the base template with additions that make sense for posts (such as the date of publication).

      To use this template, create a new file in your posts directory called, and open it in your text editor.

      Paste the following contents into the file:


      title: My First Blog Post
      description: This is the first post on my blog
      tags: post
      date: 2021-06-19
      layout: layouts/post.njk
      You’ll find this post in your `posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `eleventy --serve`, which launches a web server and auto-regenerates your site when a file is updated.

      Save the file, then head over to http://localhost:8080/posts/first-post in your browser. Notice how the URL corresponds to the location of the file in the project (excluding the extension). This is how URLs are handled by default, but they can be changed to some other format through the permalink key.

      A blog post

      The post is displayed correctly, but notice how the date is currently formatted. This date format is difficult for users to read, but Eleventy provides no built-in formatting options for dates, unlike most other SSGs. This means that you have to use an external package to get a more human readable format in Eleventy.

      In this step, you created a unique layout for blog posts and added a blog post to the site. In the next section, you’ll create a custom filter that helps with date formatting.

      Step 8 — Using Filters in Eleventy

      Eleventy supports filters for transforming content in various ways. For example, the safe filter used earlier prevents the escaping of HTML content, and there are other built-in ones like slug for transforming text into URL-friendly strings. You can also add your own custom filters that can be used in any template. These customizations can be made through the configuration file.

      Go ahead and add a universal filter for formatting dates so that it can be used in the post template. Start by installing Luxon, a lightweight JavaScript library for date formatting:

      Afterward, open the .eleventy.js config file, and update its contents as follows:


      const { DateTime } = require('luxon');
      module.exports = function (eleventyConfig) {
        // Copy the `css` directory to the output
        // Watch the `css` directory for changes
        eleventyConfig.addFilter('readableDate', (dateObj) => {
          return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(
            'dd LLL yyyy'

      The highlighted lines describe how to add a custom filter to Eleventy. First, you need to import whatever objects you need from any external libraries. The DateTime type from Luxon provides several methods for formatting purposes.

      Adding a filter involves calling the addFilter() method provided by the eleventyConfig argument. It takes the filter name as its first argument, and the callback function is what will be executed when the filter is used. In the above snippet, the filter is called readableDate, and the callback function is used to format a date object using the provided date tokens. This will yield a date in the following format: 19 Jul 2021.

      Save the config file and restart the server so that the changes take effect. Then use the readableDate filter in the post template as shown below to format the post date according to the specified layout.


      . . .
      <p class="subtitle is-6">
        Published on: <time datetime="{{ }}">{{ | readableDate }}</time>
      . . .

      Once you open the post in your browser, you’ll notice that the date formatting has been updated.

      Screenshot showing nicely formatted date

      In this step, you added a filter to change the date formatting on blog posts. In the next section, you’ll display a list of posts on the homepage, as is conventional on most personal blogs.

      Step 9 — Displaying Posts on the Homepage

      To make it easier for visitors to your site to discover the posts on the blog, it’s a good idea to list them on the homepage. You will use Eleventy’s collections feature in order to implement this functionality.

      Before you proceed to update the index.njk file, you’ll need to create at least three additional posts to showcase on the homepage. You can copy the first post into new files, and change the title and description for each of them. Once you’re through with that, update your index.njk file as shown below:


      title: Homepage
      layout: layouts/base.njk
      <section class="hero is-medium is-primary is-bold">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">{{ site.title }}</h1>
            <h2 class="subtitle">{{ site.description }}</h2>
      <section class="postlist mt-3 pt-3">
        <div class="container">
          <h2 class="title has-text-centered mt-3 mb-6">Recent posts</h2>
          <div class="columns">
            {% for post in | reverse %}
              {% if loop.index0 < 3 %}
                <div class="column">
                  <div class="card">
                    <header class="card-header">
                      <p class="card-header-title">
                        {{ }}
                    <div class="card-content">
                      <div class="content">
                        {{ }}
                    <footer class="card-footer">
                      <a href="{{ post.url }}" class="button is-fullwidth is-link card-footer-item">Read article</a>
                {% endif %}
            {% endfor %}

      The for loop construct in the above snippet is from the Nunjucks templating language, and its one of the ways to iterate over a collection in Eleventy. It starts with {% for post in | reverse %} and ends with {% endfor %}. The post collection is created by Eleventy and consists of any page that has its tags front matter property set to post.

      The reverse filter is used here so that the iteration starts from the most recent post instead of the default order, which puts older posts first. Within the loop, the output of the collection is limited to three items, and the post local variable is used to access the title, description, and URL of each post in the collection.

      After saving the file, go to the homepage in the browser to see the results. It should look similar to the screenshot below.

      Eleventy recent posts output

      In this step, you created additional blog posts and used Eleventy’s collections feature to list them on the website’s homepage. You now have a styled website with a homepage, an “About” page, and some posts. Next, you’ll deploy it to production through GitHub and DigitalOcean’s App Platform.

      Step 10 — Pushing the Website to GitHub

      Before you can deploy your code to DigitalOcean’s App Platform, you need to get your site in a Git repository, and push that repository to GitHub. The first thing to do is initialize a Git repo in your project directory:

      Next, create a .gitignore file at the project root so that you can exclude the contents of the node_modules and _site directories from being tracked in the Git repo.



      After saving the file, run the commands below to add all the project files to the staging area, then make your initial commit:

      • git add -A
      • git commit -m "Initial version of the site"

      The output should look similar to this:


      [master (root-commit) e4e2063] Initial version of the site 15 files changed, 6914 insertions(+) create mode 100644 .eleventy.js create mode 100644 .gitignore create mode 100644 _data/site.json create mode 100644 _includes/layouts/base.njk create mode 100644 _includes/layouts/page.njk create mode 100644 _includes/layouts/post.njk create mode 100644 _includes/nav.njk create mode 100644 about/ create mode 100644 css/style.css create mode 100644 index.njk create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 posts/ create mode 100644 posts/ create mode 100644 posts/

      Navigate to GitHub, log in with your profile, and create a new empty repository for your project called eleventy-blog (it can be public or private). Once the GitHub repo is created, copy the link to the repo, and add it as a remote location for your project in the terminal:

      • git remote add origin

      Before you push your changes to the remote location, rename the default branch to main to match what GitHub expects:

      Finally, run the command below to push the main branch to GitHub. Enter your GitHub account credentials when prompted.

      Note: If two-factor authentication is enabled for your GitHub account, you’ll need to use a personal access token or SSH key when accessing GitHub on the command line. For more information, see Using two-factor authentication with the command line.

      The output should look similar to this:


      Enumerating objects: 23, done. Counting objects: 100% (23/23), done. Delta compression using up to 4 threads Compressing objects: 100% (19/19), done. Writing objects: 100% (23/23), 64.41 KiB | 2.38 MiB/s, done. Total 23 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To * [new branch] main -> main

      In this step, you added your site to a Git repository, which you then pushed to GitHub. You are now ready to deploy your website to DigitalOcean’s App Platform.

      Step 11 — Deploying to DigitalOcean with App Platform

      Go ahead and log in to your DigitalOcean account, then head over to and click the green Create button on the top right. Choose the Apps option in the dropdown, then, on the resulting page, select GitHub as your source.

      DigitalOcean App Platform Source

      You’ll be redirected to GitHub and prompted to give DigitalOcean access to your repositories. You can choose all repositories, or just the ones you wish to deploy. Click Install and Authorize once you’ve made your choice. You should be redirected back to the Choose Source page once again.

      Install and Authorize DigitalOcean on GitHub

      On the Choose Source page, select GitHub, then choose the eleventy-blog repository from the Repository dropdown. Ensure that the selected branch is main, and the checkbox to autodeploy code changes is ticked, then click Next to continue.

      Configure GitHub source

      On the next page, your project will be auto detected as a Node.js project. You may need to change its Type to Static Site, and the Output Directory to _site as shown in the screenshot below. Click Next to continue once everything matches.

      Configure application

      Name your static site, and click Next to go to the Finalize and Launch screen.

      Name static website

      Static sites are free, so retain the default Starter selection under Plans, and press Launch Starter App at the bottom of the page.

      Launch starter app

      Your site will build immediately, and you should see a success message after a few minutes.

      Site deployed to DigitalOcean’s App Platform

      By default, your app will be given a sub-domain on Now that your site is deployed, you can visit the provided URL to view the live website in your browser. You can also register a custom domain for your site by following How to Manage Domains in App Platform.


      In this tutorial, you built a static site with Eleventy and deployed to DigitalOcean’s App Platform. Moving forward, you can make changes to your website locally, push the changes to GitHub, and DigitalOcean will automatically update the live site. You can go to the app dashboard to see the progress of the build at any time.

      To build on what you’ve achieved in this tutorial, visit the Eleventy docs to learn more about how you can customize your site’s templates, and add features like responsive images, syntax highlighting, and caching. If you’d like to get started quickly without creating your own theme from scratch, check out the starter projects page.

      Source link

      How to Hire a Developer for Your Website

      An attractively designed and well-coded website will help you convert customers, rank high on Google, and avoid frustrating errors and downtime.

      You can build and maintain your website using a website builder or a WordPress theme and plugins. However, working with a developer has lots of advantages, especially for business owners: you will have greater flexibility over your website’s appearance and functionality, you can rest assured that everything will function as it should, and you will also cut down on your own workload.

      Whether you are creating a new website, updating it, or simply maintaining it, hiring a developer can save you time and ensure your site runs smoothly.

      We’ve previously looked at how to hire a developer for a custom WordPress theme, and today, we’ll take you through how to hire one for any website project. We will look at how to outline your project and identify the type of developer you need, where to find and hire developers, and what your budget should be.

      Already know the answers to some of these questions? Use the links below to skip ahead to the information you need:

      How to Determine the Scope of Your Project

      Outlining the project requirements will help you choose the right web developer and budget appropriately. It will also help you communicate exactly what you need, so you are more likely to have a positive working relationship with the developer.

      One of the biggest things to consider is whether the project relates to the website’s design, coding and functionality, or both.

      • Design projects: These are normally tied to branding and user experience. Perhaps you want a new homepage layout, a more accessible color scheme, or different fonts.
      • Coding and functionality projects: These typically relate to the features your website has and how it functions. Maybe you want a chat box or a less time-consuming way to add new products to your online store.

      Sometimes, projects require both design work and coding. Your new homepage layout, for example, might need new code to embed videos or collapse and expand text.

      What Kind of Developer Do I Need?

      There are many different kinds of website developers, but now that you know the scope of your project, you can work out which one you should work with.

      1. Designer vs. Developer

      If you just need design work, then a web designer is your best option. However, if it is a functionality-based project, you will need a developer. If the project touches on both, you have a couple options: you can hire both a website designer and developer, or you can work with an agency.

      You might wonder if a graphic designer could do the job instead of a web designer. While both graphic designers and web designers create brand imagery such as logos and color schemes, a web designer also uses CSS, HTML, and potentially other programming languages to bring the designs to life on your web page.

      Plus, and perhaps even more importantly, they design with user experience in mind. This means they consider accessibility for screen readers, SEO best practices, and what your website will look like on different screens and systems.

      We’ve written a guide to hiring a designer to create a custom website, so if you decide a designer is what you’re really looking for, check that out. However, if you need a developer, keep reading.

      2. Front-end vs. Back-end Developers

      The front end of your website is the visible part the reader interacts with. The back end is the part that you use to upload new content, do security updates, and more. Sometimes, these are also called client side (front end) and server side (back end).

      These two parts of your website are built with different programming languages, so many developers specialize in either one or the other. Before you start speaking to developers, you will want to work out if this is a front-end or back-end project — or both.

      Bear in mind that some back-end developers describe themselves by the programming languages they specialize in, e.g. PHP developer or Ruby developer. If you’re looking for a back-end developer online and know what language you need, try searching for that instead.

      3. Full-Stack Developer

      Let’s say that your project involves both the front end and back end of your site. You have two options: you could either work with two developers or hire a full-stack developer.

      A full-stack developer can work on both ends of the website. They are proficient in all the main languages and frameworks and tend to be more expensive as a result.

      It’s a particularly good idea to work with a full-stack developer when you are designing a completely new website build because they can advise you on the bigger picture.

      4. Freelance vs. Full Time

      Depending on the complexity and duration of your project, you might find it best to work with a freelancer or hire a full-time web developer. Both options have their pros and cons, but it shouldn’t be too hard to work out what’s best for you and your company.

      For one-off projects with no maintenance required, a freelance website developer will likely suit your needs best. Similarly, if minimal maintenance is required, an agency or freelancer will help you keep your website running smoothly and your costs low.

      However, if you think your website will need regular and time-consuming maintenance or updates, then you could find hiring a full-time employee works out better. It can be a pricey investment: calculated that the average website developer salary listed on their website was $72,000 per year. However, it also means you have someone on-hand ready to fix anything that goes wrong. Larger businesses with more complex websites, such as banks and streaming services, often have an in-house development team.

      Alternatively, you could bring on an independent contractor full-time for the duration of your project. This works well when your project is particularly large or urgent, but you don’t foresee significant long-term maintenance. You benefit from having a dedicated web developer on the team, but you don’t have to commit to a long-term hire.

      Where to Hire a Developer

      There are lots of places where you can hire a professional developer or even a web development team online. The best option for you will depend on your priorities and amount of time. Here are some of your options:

      DreamHost’s Web Development Services

      With our web development services, you’ll have a dedicated project manager and access to a host of professional developers. It doesn’t matter if you need website design work, WordPress development, page speed optimization, or anything else: your project manager will always allocate a specialist to work on your website. Most jobs are completed within 72 hours.

      You Dream It, We Code It

      Tap into 20+ years of coding expertise when you opt for DreamHost’s Web Development service. Just let us know what you want for your site — we take it from there.

      Freelance Platforms

      Online platforms and job boards will let you outsource your web design needs to freelance developers. Some of the most popular ones include Upwork,, PeoplePerHour, Guru, and Stack Overflow.

      While the exact process can vary from one site to another, it tends to be pretty similar. You either create a job listing and wait for freelancers to contact you, or you review available freelancers and message them directly.

      There are often thousands of freelancers to pick from, so there is always someone with the right skills and experience. However, reviewing all the options and selecting someone can be time-consuming. Public reviews and work samples will help you narrow down your options.


      If you are looking for a team of professional developers, then you could try an agency. It’s a particularly good option if you know you’ll need a designer and a developer, for example.

      Unlike individual website developers, agencies don’t tend to be on freelance platforms (although there are exceptions). Instead, you have to find them by searching online or by word of mouth.


      If you are unsure who to work with, try asking your professional network or friends for recommendations. You’ll not only get a shortlist of developers who impressed people you know, but you will also be able to ask questions about their style and view their previous work.

      Budgeting: How Much Does a Web Developer Cost?

      You’ve identified what you need, who you should work with, and how to find them. Now it’s time to discuss your needs and negotiate costs.

      Freelance web designers normally charge by the project or the hour, although independent contractors may give you a day rate instead. If they charge hourly, they should also be able to give you a loose estimate of the required number of hours before you begin.

      The hourly rate of a professional web developer can vary dramatically based on their skills and experience. If you need the project completed urgently, some may also charge rush fees.

      According to Upwork, one of the most well-known platforms for hiring freelancers, the average rate of a full-stack developer in the US is $55+ per hour. An intermediate-level front-end developer, meanwhile, charges on average $35 per hour.

      However, these numbers can rise significantly if you want experienced developers. Many of Upwork’s freelance web developers charge over $100 per hour, which is in line with our experience, too.

      If you need regular web development services, you may find that signing up for a retainer is more cost-effective. This means that you purchase a set number of hours per week or month, and you normally receive them at a discounted rate.

      Let’s use DreamHost’s Web Development Services as an example. If you only sporadically need a web developer or designer, you can buy an on-demand bundle for $99–$129 per hour. However, if you purchase a monthly retainer, the per-hour rate falls to $89–$109.

      Bear in mind, however, that you may lose any hours you don’t use with retainers. Check the terms and conditions, as they can vary. For example, at DreamHost, unused hours roll over, but you can’t accrue more than double the value of your plan.

      How to Evaluate the Quality of a Web Developer

      programmer focused on code

      When hiring a web developer, it is worth taking your time to find the right one. You should look for someone who is not only within your budget but also understands your vision for your website and provides quality service.

      It can be hard to judge a web developer’s skills, especially if you don’t have a tech background. However, there are some things you should look for.

      Technical Requirements

      Simply put, is the developer proficient with all the necessary languages and applications?

      Generally speaking, if they are a front-end developer, they should know CSS, HTML, JavaScript, and common frameworks such as jQuery and Bootcamp.

      You are unlikely to come across a front-end developer who doesn’t meet these minimum technical requirements. However, you should also check that they are familiar with best practices for website accessibility and SEO.

      Back-end developers, meanwhile, will be proficient with PHP, Python, Ruby, and more. Depending on your project, you may find it is worth searching for a specialist in a particular programming language.

      You might also want to search for a WordPress developer, Shopify developer, app developer, or even a mobile developer.

      Response Time

      It’s not just a website developer’s technical skills that matter. Response time is also important, especially if you are bringing them on at the creative planning stage or to fix bugs.

      Pay attention to how quickly the developer responds when you first contact them and then negotiate the details. While freelancers generally do not reply as quickly as employees, they should still respond within a reasonable timeframe.

      Communication Skills

      Good communication isn’t only about quick response times. Ask yourself: Are they a clear communicator? Do they seem to understand what you want, and do they clarify and confirm as needed?

      When negotiating, are they direct and professional? Do they explain what you can expect, and are they transparent about budgets, timelines, pricing, and any potential complications? Do they let you know what they will need from you to get the work done?

      Are they flexible? When you express preferences or uncertainty, do they listen and then either explain or adapt?

      You’re hiring a web developer, not a marketing manager, but communication skills are still critical. They will help the project run smoothly and ensure that there are no unpleasant surprises caused by miscommunications.


      A more experienced web developer typically has higher rates, although they might work out less expensive than you would think. That’s because they also tend to work more efficiently and produce cleaner, better code than inexperienced developers.

      It’s more than just the years or the number of projects that count, however. Pay attention to the type of work the developer has previously taken on, and what kinds of companies they have worked with. Ideally, they will have similar experiences to draw on when working on your website.

      Previous Projects

      Looking at the work they’ve done previously will give you an idea of their skill and — especially for front-end developers — style.

      Most professional website developers will have a portfolio on their website, and you can also ask to see samples that are similar to your project. Typically, developers will carefully curate their portfolio to only show their most impressive work. So, if you let them know what you are looking for, you might be surprised by how many extra samples they can show you.

      Don’t be afraid to ask if you have any questions about their previous projects, but remember that some details may be confidential.

      Customer Ratings and Testimonials

      There is no better way to see what a developer is like to work with than by reading customer ratings and testimonials. Most developers will have some on their website, while platforms like Upwork feature customer reviews by default.

      When reading reviews, especially public ones, try to read between the lines. Someone else’s ideal developer might not be a good fit for you. However, paying attention to the things that are praised will give you an idea of their work and communication style.

      You’re Cordially Invited

      Join DreamHost’s Facebook group to connect with like-minded website owners and get advice from peers and experts alike!

      Hiring a Developer: Summed Up

      Working with a developer can help you keep your website looking professional and running smoothly. Whether you’re editing the WordPress theme, removing malware, or adding new features such as a shopping cart, a developer can help you achieve your goals quickly and easily — meaning you can focus on your website’s services instead of its code.

      Ready to bring a developer onto your team?

      Consider DreamHost’s Web Development Service. You’ll instantly gain access to our comprehensive team of professional developers and designers. And the process is simple: Submit your request to our team for an estimate and then we’ll get to work implementing the changes on a staged version of your site. Once you approve, we push the changes live. You dream it, we code it! Check out plans today.

      Source link