teleren/devto huggingface dataset:
5 Dicas de Flutter
Tags: flutter, frontend, programming, beginners
Published: 2024-04-14 15:56:51

![flutter](https://media.giphy.com/media/E89xxATM4iZoPdr6Tb/giphy.gif?cid=790b7611g9nqrb8nnw06f0u6s4r7xd2cv6kxun7r1ppxax6g&ep=v1_gifs_search&rid=giphy.gif&ct=g)
Atenção desenvolvedores Flutterers,

Você está procurando melhorar suas habilidades de desenvolvimento com Flutter?

Aqui estão **cinco dicas práticas e truques** para Flutter:

1. Aproveite o Hot Reload para economizar tempo e fazer alterações rapidamente.

2. Utilize widgets para reutilização e organização de código mais limpo.

3. Mantenha seu código simples e evite adicionar recursos desnecessários.

4. Use programação assíncrona para melhor eficiência e experiência do usuário.

5. Mantenha-se atualizado com a interface do usuário (UI) em evolução do Flutter e continue aprendendo.


![user](https://media.giphy.com/media/FumEZTcW56ywdvN5IA/giphy.gif?cid=790b7611m4vignzz433m8eps6rtyeenz1tqmts3rhk2fjk5q&ep=v1_gifs_search&rid=giphy.gif&ct=g)

Lembre-se, **entender a perspectiva do usuário é crucial** para um ótimo desenvolvimento do Flutter.


Não hesite em experimentar e **testar diferentes abordagens** para encontrar o que funciona melhor para seus projetos.

![pattern](https://media.discordapp.net/attachments/1205192853882404896/1229078699844964484/image.png?ex=662e5fbd&is=661beabd&hm=e9afced821f27030d87efcdcd8552481cac2c189b50ed46eaeebfe091214a107&=&format=webp&quality=lossless&width=944&height=467)`Imagem usada para demonstrar um exemplo de organização de código em Flutter`


> IMPORTANTE
> Se uma função ou método fizer uma tarefa complexa, não use assíncrono. Em vez disso, os use isolados.

![celebrate](https://media.giphy.com/media/YTbZzCkRQCEJa/giphy.gif?cid=790b7611ygro5qomhc2us74mjdmcj9o25ia1aekwv2ou5mzr&ep=v1_gifs_trending&rid=giphy.gif&ct=g)

Cada abordagem tem seus pontos fortes dependendo do objetivo da tarefa.

**Muito obrigada pela atenção 🩵🩵✌️**

Referências: 
- [Flutter Clean Architecture Series — Part 1 (UPDATED)](https://devmuaz.medium.com/flutter-clean-architecture-series-part-1-d2d4c2e75c47)
3 YEARS On My Side Project!
Tags: sideprojects, webdev, javascript, react
Published: 2024-04-14 15:33:10

I started working on [daedalOS](https://github.com/DustinBrett/daedalOS) on January 1st, 2021, and more than 3 years later I still enjoy adding to it and improving it almost daily.

{% youtube tGpvcQKaGzs %}

I've learned so much while making this project into my [personal website (dustinbrett.com)](https://dustinbrett.com/). It's made me a much better web developer as I have tried to emulate a desktop environment with pixel perfect accuracy using CSS, HTML & JavaScript.

Over the years I have live streamed and made videos of my progress. The first year I [streamed](https://youtube.com/playlist?list=PLM88opVjBuU7xSRoHhs3hZBz3JmHHBMMN&si=XmhpL-LFWIgrY6iL) every single week for 52 weeks. Then as the project evolved I started doing monthly feature reviews, similar to what I had seen done with SerenityOS which was an inspiration of mine.

Now I am in the 2nd year of being nominated for a Webby, and this time I am hoping I've done enough that the judges pick me in the end. But also if you like my project and want to support me, you can [vote for my site to win the People's Voice award](https://vote.webbyawards.com/PublicVoting#/2024/websites-and-mobile-sites/general-desktop-mobile-sites/personal-blogwebsite).

{% youtube HvuboyIWIIQ %}

Thanks for checking it out!
The Friendly Snake: Why Python is the Coolest 🐍
Tags: python, beginners, programming, learningpython
Published: 2024-04-14 15:27:21

**A Beginner-Friendly Coding Adventure 🚀**

Python is among the top five popular programming language in the world, and for good reason! With its simple and beginner-friendly syntax, it's like coding for dummies (but in a good way 😉). That's probably why C++ programmers hate it so much they're just jealous of how easy Python makes things 😁!

But don't let the simplicity fool you – Python is the language of choice for **artificial intelligence** and **machine learning**. It's also heavily used in scripting, automation, and backend development. And with its massive ecosystem of third-party libraries like NumPy, pandas, scikit-learn, TensorFlow, Django, and Kivy, you can do pretty much anything with Python!

Now, let's get to the fun stuff. Did you know Python is 33 years old? It was created by a Dutch programmer in 1991 and named after the iconic British comedy Monty Python. How cool is that? 🤯

Python is an interpreted language, which means you can run your code without the compilation step. But don't worry, you'll still need an interpreter (written in C for performance, of course).
And here's where things get really interesting: Python has hidden gems! You can import this for the Zen of Python or 

```
__import__("antigravity")
```
 for a fun surprise. Trust me, you'll want to try it out. 😉

In Python, you can declare variables with a name and a value that can be a string, a boolean, or a number. And since it's dynamically typed, the variable's type is determined at runtime. This means you can add or even multiply strings and numbers! Mind = blown 🤯
Python has four types of collections: **lists, tuples, sets, and dictionaries**. And unlike many languages, you can use negative indices to count backwards. Fancy, right?

To define a function, you use the def keyword, and to declare a block of code, you don't need curly braces (take that, C++!). Python also supports object-oriented programming, so you can define classes using the class keyword and have them inherit from each other.
Python comes with "batteries included" – a huge library of built-in modules for tasks like working with CSV files, JSON, emails, web scraping, and more. It's like having a Swiss Army knife for coding!

If you're wondering how to start learning Python, I personally started with the book " **Think Python 2e: How To Think Like a Computer Scientist** " It's a great way to get your feet wet and think like a true Pythonista. You can get a free copy of the book here: [Green Tea Press Free books by Allen B. Downey](https://greenteapress.com/wp/)

**Conclusion:**

Whether you're a complete beginner or an experienced coder looking to try something new, Python is the way to go. With its friendly syntax, powerful libraries, and vibrant community, it's no wonder Python has slithered its way into the hearts of programmers worldwide. So why not join the Python party and see what all the hype is about? Trust me, you won't be disappointed! 🎉
การแสดง Multiple Linear Regression เป็นกราฟ 3 มิติ โดยใช้ Python
Tags: python, ai, machinelearning
Published: 2024-04-14 15:20:14

ในการที่เราจะทำการคาดคะเนหรือทำนายของยอดขายของสินค้าเราจำเป็นต้องมีการนำตัวแปรหลายตัว เช่น ราคาสินค้า,ปริมาณการลงโฆษณา ที่มีผลต่อการยอดขายสินค้า ซึ่งหนึ่งในวิธีในการที่จะใช้ในการทำนายข้อมูลแบบนี้คือ Multiple Linear Regression 

**Multiple Linear Regression (MLR)** คือ สมการเชิงเส้นที่มีตัวแปรอิสระหรือตัวแปร X มากกว่า 1 ตัวมาเป็นตัวกำหนดตัวแปรตามหรือค่า Y โดยมีสมการในการคำนวณดังนี้

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tso3g2fgafxtlst8okzp.png)

- Y คือ ตัวแปรตาม
- X คือ ตัวแปรอิสระ
- β คือ พารามิเตอร์
- ε คือ ความคลาดเคลื่อน

Multiple Linear Regression นั้นสามารถใช้งานได้ในการ วิเคราะห์ความสัมพันธ์ การทำนายหรือการหาค่าคงที่

ซึ่งในบทความนี้เราจะใช้ Multiple Linear Regression ใน Python  ซึ่งจะทำทั้งหมดนี้ใน Google Colab และในส่วนของ Dataset จะเป็นการกำหนดขึ้นมาเอง

**ขั้นตอนการทำ**
ขั้นที่ 1 : _นำเข้า libraries ที่ต้องการใช้ทั้งหมดลงใน Google Colab 
โดยตัวแปร x กับ y จะใช้ในการสร้าง_
```
import numpy as np
X= [[160,100],[179,189],[175,321],[190,320],[195,480],[185,185],[179,149],[200,150],[189,350],[221,240],[235,120],[269,280],[259,345],[269,135],[279,378]]
Y= [0.80,1.50,2.22,1.68,1.85,1.45,0.90,0.60,1.85,1.30,0.55,1.06,1.33,0.64,1.23]
```

ขั้นที่ 2 : _ทำการเตรียมข้อมูลให้อยู่ในรูปแบบ DataFrame เพื่อนำมาใช้ในการสร้างโมเดล _

```
import pandas as pd
df2=pd.DataFrame(X,columns=['Price','AdSpends'])
df2['Sales']=pd.Series(Y)
df2
```

ขั้นที่ 3 : _สร้างและประมวลผลโมเดล Multiple Linear Regression โดยใช้ statsmodels และเก็บผลลัพธ์ไว้ในตัวแปร_ 

```
import matplotlib.pyplot as plt
import statsmodels.formula.api as smf
model = smf.ols(formula='Sales ~ Price + AdSpends', data=df2)
results_formula = model.fit()
results_formula.params

```

ขั้นที่ 4 : _เตรียมข้อมูลเพื่อนำไปใช้ในการพล็อตกราฟ_

```
x_surf, y_surf = np.meshgrid(np.linspace(df2.Price.min(), df2.Price.max(), 100),np.linspace(df2.AdSpends.min(), df2.AdSpends.max(), 100))
onlyX = pd.DataFrame({'Price': x_surf.ravel(), 'AdSpends': y_surf.ravel()})
fittedY=results_formula.predict(exog=onlyX)
```

ขั้นที่ 5 : _แปลงผลลัพธ์ที่ได้มาเป็นอาร์เรย์_

```
fittedY=np.array(fittedY)
```

ขั้นที่ 6 : _ทำการพล็อตกราฟ 3 มิติเพื่อแสดงการกระจายของข้อมูลตัวแปรอิสระ  และผลลัพธ์ที่ทำนายได้ โดยอยู่แสดงออกมาเป็นภาพของภาพสี่เหลี่ยมสีฟ้า_ 

```
fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')
ax.scatter(df2['Price'],df2['AdSpends'],df2['Sales'],c='red', marker='o', alpha=0.3)
ax.plot_surface(x_surf,y_surf,fittedY.reshape(x_surf.shape), color='b', alpha=0.4)
ax.set_xlabel('Price')
ax.set_ylabel('AdSpends')
ax.set_zlabel('Sales')
plt.show()
```

เพิ่มเติม หากคุณต้องจะกำหนดขนาดของพื้นที่กราฟให้คำการเพิ่ม Code 
fig = plt.figure(figsize=(n,n)) แทนตัวของ  fig = plt.figure()  



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma6n0c66ptqknp8m22mc.png)

**สรุปผล**
ถ้าหากเราต้องการที่จะทำการคาดคะเนตัวแปรใดตัวแปรหนึ่ง โดยที่ตัวแปรนั้นๆมีความเกี่ยวข้องกับตัวแปรอื่นๆกันให้อยู่ในรูปของกราฟ 3 มิติเพื่อใช้ในการระบุข้อมูลต่างๆนั้นสามารถใช้ Multiple Linear Regression ในการช่วยคำนวณได้
Integration Cypress with Azure DevOps: Publishing test videos in your Pipeline
Tags: javascript, azure, devops, testing
Published: 2024-04-14 15:16:31

Cypress is a front end test automation tool used for regression testing web applications. It is based in JavaScript and integrates seamlessly with many continuous integration tools, making it a great choice for automating tests.

I've been studying Cypress for a while now, especially it is integration with Azure DevOps. In this post, I will share how to publish videos from Cypress tests on Azure DevOps.

Let's go!🚀

First of all, make sure your tests are in a **Git repository (“Repos”)** in Azure DevOps.

Next, in your Cypress test code, you need to configure the settings in the "cypress.config.js" file as follows:

```
// cypress.config.js

module.exports = {
  video: true,
  videosFolder: 'cypress/videos'
};

```

Now, navigate to Pipelines. If you already have a configured pipeline, locate it and click on Edit to make changes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9v58yn7f0op62crpoqlh.png)

After that, in your pipeline editor within Azure DevOps, navigate to Tasks and use the search bar to find the task named **"publish build artifacts".**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/521cnc3s8fntx22yvrvc.png)

Now, you'll configure the task:

1. Set the **Path to publish** to specify where the artifact files will be stored in Azure.
2. Specify the **Artifact name** to give a name to your artifact.
3. Leave the **Artifact publish location** as default, normally set to "Azure Pipelines".

After configuring these settings, click on **Add** to add the task to your pipeline.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60ezb659a1j5zxfqykp6.png)

Now the configuration has been added to the **azure-pipeline.yml** file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9il19k7k9755n9qj57h.png)
Once you have saved the azure-pipeline.yml file, initiate the test build by clicking on **"Run Pipeline"** in Azure DevOps. This action will start the CI/CD pipeline and execute the defined tasks, including a new configuration for video recording.

After running the test, navigate to the "Summary" and look for the information indicating **"1 published artifact"** and click on it. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mbo2pwjgwl5oy5ayc48.png)

This artifact contains the test recording. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6e0urpu7bs2h8k9grrq.png)
By following these steps, you will use video recordings for better test analysis and debugging when necessary!

If you found this article helpful, please leave a comment.❤️
Developing a Brand Media Website for a Leading Proptech Company
Tags: realestate, media, webdev, design
Published: 2024-04-14 15:09:13

The "Samolet" Group of Companies established the brand media "Easy Speaking" to engage with its audience effectively. Divided into "Life" and "Pro" sections, it aims to enrich readers' lives and provide professional insights. Evrone developed a user-friendly WordPress website for the content team, tailored to their needs within just three weeks. Custom plugins were crafted to enhance text handling capabilities, ensuring seamless content management. The result: a swift deployment of a fully customized platform, enabling the team to focus on content quality.

[Read the full case study here.](https://evrone.com/cases/samolet)
Largest Number | LeetCode | Java
Tags: java, leetcode, beginners, algorithms
Published: 2024-04-14 15:08:36

## Intuition :
The main intuition behind this problem is **sorting**. Now, are we gonna apply merge sort, quick sort, selection sort 🤔?
No... 
It will be a **custom sorting**. Means we are gonna sort according to our problem statement. 

-> Custom sorting, also known as comparator-based sorting, allows you to define your own comparison logic for sorting elements. In Java, you can achieve custom sorting by providing a comparator function.



## Algorithm :
1. Input: The method takes an array of integers nums[] as input.
2. Convert Integers to Strings: Initialize a string array arr[] of the same length as nums[]. Iterate through each integer in nums[] and convert it into a string, storing it in the corresponding index of arr[].
3. Custom Sorting: Sort the string array arr[] in non-ascending order based on a custom comparator. The comparator concatenates two strings s1 and s2 in two different orders (s2+s1 and s1+s2) and compares them lexicographically. This ensures that when sorted, the resulting order will form the largest number.
4. Build the Largest Number: Initialize a StringBuilder to build the largest number. Append each string from the sorted arr[] to the StringBuilder.
5. Check for Leading Zeros: If the first element of the sorted array is "0", it means that all elements are zeros. In this case, return "0" as the largest possible number.
6. Return Largest Number: Convert the StringBuilder to a string and return it as the result.



## Code

``` java
class Solution {
    public String largestNumber(int[] nums) {
        
        int n = nums.length;

        String arr[] = new String[n];

        for(int i=0; i<n; i++){
            arr[i] = String.valueOf(nums[i]);
        }


        Arrays.sort(arr, (s1, s2) -> (s2+s1).compareTo(s1+s2));

        StringBuilder sb = new StringBuilder();

        for(String s : arr)
        sb.append(s);


        if(arr[0].equals("0"))
        return "0";

        return sb.toString();

    }
}
```

PS : Do try to learn more about lambda functions in Java as it might come in handy.

_Thanks for reading :)
Feel free to comment and like the post if you found it helpful
Follow for more 🤝 && Happy Coding 🚀_

If you enjoy my content, support me by following me on my other socials:
https://linktr.ee/tanujav7
survey: Risk Prediction of Digital Transformation of Manufacturing Supply Chain Based on PCA and BPNN
Tags: machinelearning
Published: 2024-04-14 15:06:32

## 選定理由

あまり有名な出所ではないが、ベーシックな技術を使用していて基礎固めに良さそう。タイトルが長いため省略表示している。

Paper: https://www.sciencedirect.com/science/article/pii/S1110016821003707
Code: N/A

サーベイ論文[[Soori2023](https://www.sciencedirect.com/science/article/pii/S2949948823000112)] でも引用されている。

## 概要

【社会課題】
中国市場での製造業におけるMSC（製造サプライチェーン）のデジタル化では、不確実性が高く、リスク要因を正確に特定し、予測することが困難である

【技術課題】
リスク要因を効果的に特定し、予測するためにはデータの次元が高く、効率的なモデルトレーニングが難しい

【提案】
主成分分析（PCA）を組み合わせた逆伝播ニューラルネットワーク（BPNN）を提案。これにより、データの次元削減と特徴パラメータの選択が行われ、ネットワークの構造が簡素化され、効率的なトレーニングが可能となる。

【効果】
提案手法は一部のデータでの評価で、良好な予測効果を示し、従来のニューラルネットワークモデルと比較して、より良いリスク予測が可能であることを示した。(以下の主張は結論に記載されているが実験結果からは導けない)又、中国の製造業では戦略の一貫性の欠如が最も重要な要因となってデジタルサプライチェーンの安定性や企業のリスク管理能力に影響を与えていることが明らかになった。

## 内容詳細

### 研究課題

デジタル化された製造サプライチェーン（MSC）のリスク管理に関する研究は不足しており、MSCのデジタルリスク予測は未知の側面が多い。本研究では、[TOE理論](https://mba.globis.ac.jp/about_mba/glossary/detail-12326.html)に基づいてMSCのデジタル変革のリスク要因を分析し、技術・組織・環境が主要なリスク源であることを前提とし、そこにMSC固有のリスクを加えた１２個のリスクを予測対象とした。

![tb1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9a9j72ydpkzcpm1qsrd.png)

### データ

MSCのデジタル変革リスクに関するアンケートを設計し、中国のいくつかの大規模および中規模製造企業で第三者調査会社に実施させた。アンケートでは、各項目をLikert 5点尺度で評価し、合計225件のアンケートが配布され、そのうち87.6％（197件）が収集された。次に、元のデータに対して信頼性および妥当性の分析が行われ、Cronbachのαは0.832で高い信頼性を示し、Kaiser-Meyer-Olkin（KMO）統計値は0.863で1に近い値を示した。また、球面度のBartlett検定の統計値は995.389で、P値は0であり、有意水準よりも低かったため、元のサンプルデータはPCAに適している。
最初の3つの主成分の固有値はすべて1より大きく、それらの累積分散寄与率の合計は65.038％でした。したがって、12の指標の元のデータを3つの主成分に削減できる。Kaiser正規化を用いたVarimaxによる回転により、主成分の係数行列が得られた。

### モデル(BPNN)

非線形かつ動的環境にロバストなBPNNを使用した。レイヤ数は実験的に７が最も性能がよくなった。学習はRMSを損失関数とし、最急降下を用いた。

### 実験

![tb3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ij781azw1vw9l3eqcc8n.png)

寄与率を示したのが表３である。同じグループに属するリスクは同じ主成分に入っているのがわかる。予測サンプルは以下図４である。

![fig4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gsxklz8u6r1svfqu46q.png)

提案されたBPNNモデルは、従来のANNモデルと比較して、15のテストサンプルでのシミュレーションにおいて相対誤差が小さく、収束速度とモデルの精度の両方で優れていた。具体的には、PCAと組み合わされたBPNNは、元の指標間の結合の影響を減らすことで、より信頼性の高い予測を行い、効率的に最適解に収束した。
Install NVM, Yarn, Postgres, Nginx, PM2 on Centos 8
Published: 2024-04-14 14:51:53

These are the quick commands to install NVM, Nodejs, Yarn, Nginx on Centos 8

##1. NVM
```
sudo yum install curl tar nano -y 
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash   
source ~/.bashrc
nvm install 18
```
##2. Yarn
```
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo rpm --import https://dl.yarnpkg.com/rpm/pubkey.gpg
sudo yum install yarn -y
```

##5. Nginx
```
sudo yum install -y epel-release nginx
sudo systemctl start nginx
```
Config firewall
```
sudo yum install firewalld -y
sudo systemctl enable firewalld
sudo reboot

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload
sudo systemctl enable nginx
```

##6. PostgreSQL
Download:
```
sudo dnf module enable postgresql:13 -y
sudo dnf install postgresql-server -y
sudo postgresql-setup --initdb
sudo systemctl start postgresql
sudo systemctl enable postgresql
```

Setup password for user `postgres`
```
sudo -u postgres psql
ALTER USER postgres with password 'yourpassword';
```
Open port 5432 to connect database from remote:
`nano /var/lib/pgsql/data/postgresql.conf`
```
listen_addresses = '*'
port = 5432	
```

Open firewall port:
```
firewall-cmd --zone=public --add-port=5432/tcp --permanent
firewall-cmd --reload
systemctl restart firewalld
```

Open this file: `nano /var/lib/pgsql/data/pg_hba.conf` and add this line to end of file:
```
host    all   all   0.0.0.0/0   md5
host    all   all   ::/0        md5

```

Restart postgres
```
sudo systemctl restart postgresql
```
##7. Unzip, git, pm2
```
yum install -y unzip git
npm i -g pm2
```

# Troubleshoot
If you got this error:
```
(13: Permission denied) while connecting to upstream
```
Try to run this:
```
setsebool -P httpd_can_network_connect 1
```
Create static directory listings on GitHub Actions/Pages
Tags: github, githubactions, html, tutorial
Published: 2024-04-14 14:47:09

## Background

Remember those classic directory listings from the early days of the web? They're still useful today, especially for some static sites hosted on GitHub Pages.

In this quick tutorial,I'll show you how to automatically create static directory listings on GitHub Actions/Pages with a simple PHP script I created a while back.

Best parts: It's totally free, has no dependencies, and works perfectly in GitHub Actions as they have a built-in PHP runtime.

## Trying it locally

To get started, you can try the script locally. Here's how:

Download the script from the GitHub repository:

```bash
wget https://raw.githubusercontent.com/caendesilva/php-directory-listing/master/directory-listing.php -O directory-listing.php
```

Next run the script in your terminal:

```bash
php directory-listing.php
```

This will create a self-contained `index.html` file with a directory listing of the current directory.

## Using it in GitHub Actions

To use the script in GitHub Actions, you can base it on this sample workflow:

```yaml
# GitHub Actions demo to create a directory listing for the repository files to publish to GitHub Pages

name: Demo Action

on:
  push:
    branches: [ "main" ]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      # Download the directory listing script
      - name: Download Directory Listing Script
        run: wget https://raw.githubusercontent.com/caendesilva/php-directory-listing/master/directory-listing.php -O directory-listing.php

      # Run the directory listing script
      - name: Run Directory Listing Script
        run: php directory-listing.php

      # Optional: Deploy to GitHub Pages (you can also commit the file to your repository)
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
```

This workflow will create a directory listing of the repository files and publish it to GitHub Pages.

## Conclusion

That's it! You now have a simple way to create static directory listings on GitHub Actions/Pages. Feel free to customize the script or workflow to fit your needs.

See the source code at https://github.com/caendesilva/php-directory-listing and try the live demo at https://git.desilva.se/php-directory-listing/.