Aprenda um método incrível utilizando a cloudflare para criar uma página em desenvolvimento para seu site.

página em desenvolvimento através da cloudflare

Muitas vezes navegando na internet você já deve ter se deparado com uma página em desenvolvimento ou site em manutenção.

Essa página se torna necessária durante o processo de criação de sites.

Para isso é importante ter uma página amigável e explicativa para que o usuário entenda que se trata de um site em desenvolvimento ou em manutenção.

Como criar uma página em desenvolvimento ou em manutenção utilizando a cloudflare.

Se você é um desenvolvedor oi web designer e utiliza o WordPress para criar seus sites, já deve saber ou até ter utilizado algum plugin para essa finalidade.

Mas queremos trazer um outro jeito que lhe permite fazer o mesmo sem necessitar de um plugin. Também funciona se você desenvolve em outras tecnologias.

Única coisa necessária nesse caso é você ter seu site “passando” pela CDN da Cloudflare.

Caso você não conhece a Cloudflare, vale muito a pena utilizar, tem uma boa parte de serviços gratuitos que você pode explorar.

Como no nosso caso não é abordar em si a Cloudflare e sim como criar uma página de desenvolvimento ou manutenção, entendemos que você já utiliza os seus serviços em seus sites ou blogs.

Então vamos por a mão na massa.

Para iniciar você precisa acessar seu painel de controle dentro da Cloudflare.

Na barra lateral ou menu lateral você vai encontrar um menu chamado APPS como na imagem ao lado.

primeiro passo para ter um site em desenvolvimento na cloudflare
site em desenvolvimento na cloudflare

Em seguida no campo pesquisar digite EDGY e clique no app como a imagem abaixo.

site em desenvolvimento na cloudflare com app Edgy
site em desenvolvimento na cloudflare com app Edgy

Após acessar o app clique em visualizar em seu site, como na imagem. Depois você precisa descer a página e clicar no botão verde, Instalar em todas as páginas.

instalando app Edgy para criar página em desenvolvimento na cloudflare
instalando app Edgy para criar página em desenvolvimento na cloudflare

Feito isso você precisa adicionar um email para efetivar a ativação, é um processo bem simples e rápido.

configurando página na cloudflare com app Edgy para site em desenvolvimento
configurando página na cloudflare com app Edgy

Depois de realizar esse processo você já pode utilizar desse serviço de forma gratuita.

Tem duas opções interessantes nesse app, além de você criar uma página em desenvolvimento você pode configurar um template para sempre que seu site sair do ar esse template carregar.

Você pode escolher um template fornecido pelo próprio App ou adicionar um código html.

Agora vamos explorar algumas funcionalidades que estão disponíveis para criar essa página em desenvolvimento ou site em manutenção.

No campo Modo de Manutenção clique em Mostrar/ocultar opções deseja configurar o modo de manutenção? em seguida selecione Yes show my options.

Nesse momento você pode escolher em deixar seu site inteiramente em manutenção ou em desenvolvimento.

finalizando configuração para página em desenvolvimento na cloudflare
finalizando configuração para página em desenvolvimento na cloudflare

Agora você pode escolher o tipo de template ou o código html para deixar seu site em manutenção.

Se você optou em um template html, é necessário que você adicione o código html para que o app possa carregá-lo em seu site.

Feito isso basta você clicar no botão verde, salvar alterações em todas as páginas. Uma caixa de confirmação será apresentada, informando que essa solicitação precisa seguir algumas informações, basta clicar em continuar.

página em desenvolvimento na cloudflare concluída
página em desenvolvimento na cloudflare concluída

Quando você desejar desabilitar o modo desenvolvimento basta marcar Disable maintenace mode on my domain e clicar no botão verde, salvar alterações em todas as páginas.

desativando site em desenvolvimento ou página em manutenção
desativando site em desenvolvimento ou página em manutenção

Agora seu site já será carregado sem a página de desenvolvimento.

Esperamos que esse metodologia possa lhe ser útil. Para lhe ajudar com o html criamos um template para você, confira mais abaixo.

Veja como ficou o template que criamos para você

template de página em desenvolvimento na cloudflare
template de página em desenvolvimento na cloudflare

Caso você opte por utilizar o template html, acesse o código abaixo, copie e cole no campo html personalizado.

Basta alterar os endereços das suas redes sociais e o nome da sua marca.

Código página em desenvolvimento
<!DOCTYPE html>
<html>

<head>
    <title id="company_title"></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />


    <script>

        /*  brand atributes [Object]       
            *   to change company name, just change 'name:' atribute
            *   to change company date, just change 'date:' atribute
            *   to change the social media data, just change the social media urls for your brand
            *   to change the email change only [email protected] do not remove mailto:
            *   to delete some social media, just remove the entire line from the social network and social icons,           
            *   ex: My brand doesn't have twitter, so remove the line completely -> twitter: 'https://twitter.com/Plimm3',
        */
        brand = {
            name: 'Plimm',
            date: '2022',

            LinkSocialMedia: {
                url: {
                    facebook: 'https://www.facebook.com/seuplimm/',
                    instagram: 'https://www.instagram.com/plimm.oficial/',
                    pinterest: 'https://pinterest.com/seuplimm/',
                    linkedin: 'https://br.linkedin.com/',
                    whatsapp: 'https://web.whatsapp.com/',
                    youtube: 'https://www.youtube.com/',
                    twitter: 'https://twitter.com/Plimm3',
                    email: 'mailto:[email protected]',
                },
                icons: {
                    facebook: 'fa-brands fa-facebook-square',
                    instagram: 'fa-brands fa-instagram-square',
                    pinterest: 'fa-brands fa-pinterest-square',
                    linkedin: 'fa-brands fa-linkedin',
                    whatsapp: 'fa-brands fa-whatsapp-square',
                    youtube: 'fa-brands fa-youtube-square',
                    twitter: 'fa-brands fa-twitter-square',
                    email: 'fa-solid fa-envelope-square',
                }
            }
        }


    </script>

    <style>
        :root {
            --white: #ffffff;
            --light-gray: #e9e9e9;
            --purple: #9c27b0;
            --pink: hsla(294, 100%, 55%, 1);
            --dodger-blue: hsla(197, 100%, 63%, 1);
        }

        * {
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            font-family: "Montserrat", sans-serif;
            margin: 0;
            padding: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            background: var(--dodger-blue);
            background: linear-gradient(90deg, var(--dodger-blue) 0%, var(--pink) 100%);
            background: -moz-linear-gradient(90deg, var(--dodger-blue) 0%, var(--pink) 100%);
            background: -webkit-linear-gradient(90deg, var(--dodger-blue) 0%, var(--pink) 100%);
        }



        main {
            text-align: center;
            background: rgba(255, 255, 255, 0.09);
            padding: 1rem;
            border-radius: .5rem;

        }

        main span i {
            color: var(--white);
            margin-bottom: 2rem;
            font-size: 20px;
        }


        h1 {
            font-family: 'Azonix', 'sans-serif';
            letter-spacing: 2px;

            background: #ED2C8C;
            background: linear-gradient(to right, #ED2C8C 25%, #581DB2 55%, #69A6EB 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        h1,
        h2 {
            color: var(--white);
            text-transform: uppercase;
        }

        #social_links {
            padding: 0;
            margin: 0;
        }

        #social_links li {
            list-style: none;
            display: inline-block;
        }

        #social_links li a {
            color: var(--purple);
            font-size: 2rem;
            border-bottom: 4px solid transparent;
            padding: .2rem;
            text-decoration: none;
            cursor: pointer;
            transition: .3s;
        }

        #social_links li a:hover {
            border-color: var(--dodger-blue);
        }


        footer {
            bottom: 0;
            position: fixed;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        footer #brand_name {
            color: var(--light-gray);
            font-size: 1rem;
            font-weight: 500;
        }
    </style>



</head>

<body>
    <main>
        <h1 id="company_name"></h1>
        <h2>em desenvolvimento</h2>

        <span><i class="fa-solid fa-angles-down"></i></span>

        <div class="contact">
            <ul id="social_links">
                <li class="facebook"> <a href=""></a></li>
                <li class="instagram"><a href=""></a></li>
                <li class="pinterest"><a href=""></a></li>
                <li class="linkedin"><a href=""></a></li>
                <li class="whatsapp"><a href=""></a></li>
                <li class="youtube"><a href=""></a></li>
                <li class="twitter"><a href=""></a></li>
                <li class="email"><a href=""></a></li>                             
            </ul>
        </div>
    </main>
    <footer>
        <p id="brand_name"></p>


        <script>

            function addCompanyAttributes() {

                function fillCompanyItens() {

                    // fill browser tab title
                    const title = document.getElementById('company_title');
                    title.textContent = brand.name;

                    // fill company name  
                    const companyName = document.getElementById('company_name');
                    companyName.textContent = brand.name;

                    // fill company copyright - footer  
                    const copyright = document.getElementById('brand_name');
                    copyright.textContent = `© Copyright ${brand.name} - ${brand.date} All rights reserved`;

                } fillCompanyItens();

                function addSocialMediaLinks() {

                    for (let li of social_links.children) {
                        const social = li.getAttribute('class');
                        li.children[0].href = brand.LinkSocialMedia.url[social];                        
                        li.children[0].setAttribute('class', brand.LinkSocialMedia.icons[social])
                    }

                } addSocialMediaLinks()

                
            } addCompanyAttributes();

        </script>
    </footer>
</body>

</html>

Quer aprender a criar sites profissionais, modernos e incríveis sem precisar saber de código e o melhor partindo do absoluto zero? Clique aqui

Aprenda a Automatizar seu Whatsapp para responder seus clientes de forma rápida e eficaz. Clique aqui.

Gostou dessa matéria? Então compartilhe com seus amigos 🙂

E ai Gostou? Então deixe uma resposta