DEV Community: Alohe

Easily self-host Next.js

Alohe — Sun, 13 Oct 2024 15:58:12 +0000

Introducing quicky

A CLI tool that streamlines the deployment and management of self-hosted Next.js projects, enabling initialization, deployment from GitHub, updating, deleting, and managing applications, along with effortless setup of domains and SSL certificates, simplifying the entire lifecycle of Next.js apps on remote servers.

Features

🐙 GitHub Integration: Initialize, deploy, and manage Next.js projects from private and public GitHub repositories.
⚙️ Process Management: Leverage PM2 for application lifecycle and monitoring.
🔄 Project Maintenance: Easily update or remove deployed projects.
🌐 Domain & SSL Automation: Automatically configure Nginx for custom domains and SSL certificates, allowing you to add/remove domains from your projects.
📝 Configuration Overview: List and inspect details of all deployed projects and their domains.

Prerequisites

To install Quicky, first acquire a Linux Ubuntu server from a provider such as DigitalOcean or Hetzner.

After setting up your server, connect to it (e.g., via SSH) and install Node.js and npm by executing the following commands:

sudo apt update
sudo apt install -y nodejs npm

Installation

Install Quicky globally using either npx or npm:

npx quicky@latest install

sudo npm install -g quicky

Note: The sudo command is necessary for global installation and to prevent permission issues when configuring domains.

Usage

1. Initialize Quicky

quicky init

This command will prompt you to enter your GitHub credentials and basic configurations for setting up your projects.

Quicky requires your GitHub access token and username to interact with your repositories. To create a new token, follow these steps:

Visit your GitHub Personal Access Tokens page and make sure to use Tokens (classic).
Click Generate new token.
Select the required scopes for repository access.
Click Generate token.
Copy the token and provide it to Quicky as your GitHub access token which will be stored locally for future use.

2. Deploy a Project

quicky deploy

This command will prompt you to provide:

Your GitHub username or any organization name
The repository name
The port number on which the project should run (e.g., 3000)

Environment Variables - During deployment, you'll be asked whether you'd like to add environment variables to your project.

3. Manage Projects

quicky manage

Lists all deployed projects and allows you to start, stop, restart, update, or delete a specific project.

4. Configuration Overview

quicky list

Displays an overview of all deployed projects, including the following details:

PID: Project ID.
Owner: GitHub username or organization name.
Repository: Name of the GitHub repository.
Port: Port number on which the project is running.
PM2 Status: Current status of the PM2 process.
Last updated: Date and time of the last deployment/update.

5. Domains

Before adding a domain to your project, you need to:

🛒 Purchase a domain name from a registrar like Namecheap or GoDaddy.
🌐 Create an A DNS record pointing to your server's IPv4 address.

Once you have your domain, you can easily manage it with the following command:

quicky domains

This command allows you to effortlessly add and remove domains and subdomains for your projects.

6. Upgrade Quicky

quicky upgrade

Upgrades Quicky to the latest version.

8. Uninstall Quicky

quicky uninstall

Removes Quicky from your system.

Feel free to reach out to me on 𝕏 @alemalohe if you have any questions or feedback!

Add avatars to your websites

Alohe — Wed, 12 Jul 2023 09:22:54 +0000

In today's digital world, visuals play a pivotal role in capturing attention and conveying messages effectively. When it comes to web design, application development, or even creating impactful presentations, having eye-catching and diverse avatar images can make a significant difference. This is where "Avatars" comes into play – a comprehensive collection of avatar illustrations designed to bring personality and character to your projects.

Enhancing Your Projects

Avatars offers an extensive selection of illustrations that cater to various styles and preferences. Whether you need professional-looking avatars for a corporate website, fun and playful characters for a gaming application, or even charming illustrations for a presentation, this collection has got you covered.

Diversity at Its Best

One of the standout features of Avatars is its commitment to diversity. Recognizing the importance of representation, the collection includes avatars representing different ethnicities, cultures, and backgrounds. This allows you to create inclusive and relatable projects that resonate with a wide range of audiences.

Easy Integration

Integrating Avatars into your projects is a breeze. The collection provides you with high-quality images that can be seamlessly incorporated into various platforms, including websites, applications, social media profiles, and more. With just a few clicks, you can enhance your project's visual appeal and give it that extra touch of personality.

Unleashing Creativity

Avatars not only provides you with ready-to-use illustrations but also serves as a catalyst for your creative ideas. Use these avatars as building blocks to craft unique characters and tell captivating stories. Mix and match different avatars, customize them with your preferred colors and styles, and let your imagination run wild. The possibilities are endless.

Boosting Engagement

Incorporating avatars into your projects can significantly boost user engagement. Human-like representations create a sense of connection and relatability, making users more likely to interact with your content. Whether it's through avatars in chat interfaces, user profiles, or marketing materials, these visual elements help forge a stronger bond with your audience.

Conclusion

Avatars is a game-changer when it comes to adding personality and character to your projects. With its vast collection of diverse and eye-catching avatar images, it empowers designers, developers, and content creators to enhance their creations with ease. From websites and applications to presentations and social media profiles, Avatars unlocks new levels of creativity and engagement. So why settle for generic visuals when you can bring your projects to life with Avatars?

You can find it at:
Github - https://github.com/alohe/avatars
Website - https://alohe.github.io/avatars/
You can also get the free Figma plugin here

You can also find me on twitter at: @alemalohe

Maker tag

Alohe — Mon, 17 Apr 2023 12:02:27 +0000

Introducing Maker Tag, a customizable HTML and CSS based widget that allows you to display a text tag on your website. The widget is designed to be easily added to any website with minimal configuration.

To add the Maker Tag widget to your website, simply add the following JavaScript code to your web page:

<script src="https://cdn.jsdelivr.net/gh/alohe/maker-tag@1.0.0/dist/mwl.min.js"></script>

The widget can be customized by passing an object to the MakerTag constructor. You can customize the tag's text, link, color, background, margin, padding, font size, font weight, border radius, position, shadow, and hover effects. Additionally, you can enable the animated gradient background.

Here is an example of the default configuration:

<script>
  new MakerTag({
    text: "Made with ❤️ by Alohe",
    link: "https://alohe.github.io",
    position: "bottom-left",
    background: "radial-gradient(circle at left, #FFE2A3 0%, #fff 50%, #FFE2A3 100%)",
    color: "#E59F0D",
    animated: true,
    padding: "10px 20px",
    margin: "10px",
    font: {
        size: "13px",
        weight: "700",
    },
    borderRadius: "13px",
    hover: {
        color: "",
        background: "",
        shadow: "",
    },
    shadow: "none",
  });
</script>

Maker Tag is free and open-source, so you can use it for any personal or commercial project.

To learn more or want to make a contribution, visit the GitHub page at https://github.com/alohe/maker-tag and be sure to give it a ⭐.

And, Thank you for reading 😊.

Building a free component library for react developers.

Alohe — Thu, 13 Oct 2022 22:06:55 +0000

You can copy Html and React code and integrate them onto your site, new components every week, and updates on twitter

Just added a dashboard component to https://t.co/YPbU8meb4D 🔥👀 pic.twitter.com/fPb3JYsrtB
— Alohe (@alemalohe) October 13, 2022

Any special request for a specific component? Follow and DM me on twitter @alemalohe and I'll see if your requests can fit on the site.

Also any feedback on the site (copyui.com) or any of the component codes on there, is appreciated 😊

Memoji's as placeholder avatars

Alohe — Thu, 06 Oct 2022 07:48:14 +0000

I was working on a table component for copyui.com

and I needed avatars for one of the elements in the table, so I spent a day working on https://alohe.github.io/memojis

You can add the avatars to your projects in seconds

It's open source on Github

If you have questions or feedback feel free to reach out, also follow me on Twitter 😊

Add vector emojis to your websites

Alohe — Wed, 13 Jul 2022 12:20:44 +0000

Using Emoji cloud you can to add 300+ custom vector emojis to your projects in seconds

🌐 Include the CSS file via CDN

Add the following code right before the closing </head> tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alohe/emojicloud/emojicloud.css" />

That's it, you can now start adding SVG emojis on your web page

<h1><i class="emoji-unicorn"></i></h1>
<h2><i class="emoji-unicorn"></i></h2>
<h3><i class="emoji-unicorn"></i></h3>
<h4><i class="emoji-unicorn"></i></h4>
<h5><i class="emoji-unicorn"></i></h5>
<h6><i class="emoji-unicorn"></i></h6>

You can find a complete list of the emojis here

See it in action on codepen

let me know if you have any questions or feedback

Add fully vector emoji's to your website

Alohe — Sat, 13 Mar 2021 20:47:23 +0000

A CDN for SVG emojis

Emoji Cloud · 300+ Collections of SVG emojis

Easily copy and paste SVG emojis to your projects
1. Goto https://alohe.github.io/emojicloud/
2. Search and Copy Link

https://alohe.github.io/emojicloud/svg/Face with medical mask.svg

3. Then Paste the link into your project

<img src="https://alohe.github.io/emojicloud/svg/Face with medical mask.svg" width="200px" />

4. Output